Merge pull request #39 from jverzani/ada

Tweaks for ADA compliance, evaluated by WAVE chrome plugin

Project.toml

@@ -1,7 +1,7 @@
 name = "QuizQuestions"
 uuid = "612c44de-1021-4a21-84fb-7261cf5eb2d4"
 authors = ["jverzani <jverzani@gmail.com> and contributors"]
-version = "0.3.18"
+version = "0.3.19"
 
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"

docs/Project.toml

@@ -1,3 +1,7 @@
 [deps]
 Documenter = "e30172f5-a6a5-5a46-863b-614d45cd2de4"
+LaTeXStrings = "b964fa9f-0449-5b57-a5c2-d3ea65f4040f"
 Plots = "91a5bcdd-55d7-5caf-9e0b-520d859cae80"
+
+[compat]
+Documenter = "1"

docs/src/index.md

@@ -10,12 +10,13 @@ The basic idea is:
 
 ```@example quiz_question
 using QuizQuestions
+using LaTeXStrings # helper for using math notation
 ```
 
 * create a question with `Julia` code:
 
 ```@example quiz_question
-choices = ["one", "``2``", raw"``\sqrt{9}``"]
+choices = ["one", L"2", L"\sqrt{9}"]
 question = "Which is largest?"
 answer = 3
 radioq(choices, answer; label=question, hint="A hint")
@@ -54,7 +55,7 @@ For example, the question can be asked in the body of the document
 answer = sqrt(2)
 tol = 1e-3
 numericq(answer, tol,
-    label=raw"What is ``\sqrt{2}``?",
+    label=L"What is $\sqrt{2}$?",
 	hint="you need to be within 1/1000")
 ```
 
@@ -70,8 +71,8 @@ The `buttonq` question is alternative to radio buttons where the correct answer
 
 
 ```@example quiz_question
-buttonq(["``1 + 1``", "``2+2``", "``-1 + -1``"], 1;
-    label = "Which adds to ``2``?",
+buttonq([L"1 + 1", L"2+2", L"-1 + -1"], 1;
+    label = L"Which adds to $2$?",
 	explanation="Add 'em up")
 ```
 
@@ -87,8 +88,8 @@ choices =[
 	"The quick brown fox jumped over the lazy dog",
 	"One and one and one makes three"
 ]
-ans = (1, 4)
-multiq(choices, ans,
+answer = (1, 4)
+multiq(choices, answer,
     label="Select the sentences with numbers (one or more)")
 ```
 
@@ -102,8 +103,8 @@ choices =[
 	"The quick brown fox jumped over the lazy dog",
 	"One and one and one makes three"
 ]
-ans = (1, 4)
-multibuttonq(choices, ans,
+answer = (1, 4)
+multibuttonq(choices, answer,
     label="Select the sentences with numbers (one or more)")
 ```
 
@@ -116,7 +117,7 @@ Questions with numeric answers use `numericq`. The question is graded when the i
 ```@example quiz_question
 answer = 1 + 1
 numericq(answer;
-    label="``1 + 1``?",
+    label=L"1 + 1?",
 	hint="Do the math")
 ```
 
@@ -198,7 +199,7 @@ p = plot(p1, p2, p3, p4, layout=l)
 imgfile = tempname() * ".png"
 savefig(p, imgfile)
 hotspotq(imgfile, (0,1/2), (0, 1/2),
-    label="What best matches the graph of ``f(x) = -x^4``?")
+    label=L"What best matches the graph of $f(x) = -x^4$?")
 ```
 
 ----

src/html_templates.jl

@@ -45,11 +45,11 @@ var ID = "{{:ID}}"
 <form class="mx-2 my-3 mw-100" name='WeaveQuestion' data-id='{{:ID}}' data-controltype='{{:TYPE}}'>
   <div class='form-group {{:STATUS}}'>
     <div class='controls'>
+      <div class="form" id="controls_{{:ID}}" correct='-1' attempts='0'>
     {{#:LABEL}}
-        <label for="controls_{{:ID}}">{{{:LABEL}}}{{#:HINT}}<span href="#" title="{{{:HINT}}}">&nbsp;🎁</span>{{/:HINT}}
-</label>
+    {{{:LABEL}}}
+            {{#:HINT}}<span href="#" title="{{{:HINT}}}">&nbsp;🎁</span>{{/:HINT}}
     {{/:LABEL}}
-      <div class="form" id="controls_{{:ID}}" correct='-1' attempts='0'>
         <div style="padding-top: 5px">
     {{{:FORM}}}
     {{^:LABEL}}{{#:HINT}}<label for="controls_{{:ID}}"><span href="#" title="{{{:HINT}}}">&nbsp;🎁</span></label>{{/:HINT}}{{/:LABEL}}
@@ -87,8 +87,8 @@ document.getElementById("{{:ID}}").addEventListener("change", function() {
 ##
 html_templates["inputq_form"] = mt"""
 </br>
-<div class="input-group">
-    <input id="{{:ID}}" type="{{:TYPE}}" class="form-control" placeholder="{{:PLACEHOLDER}}">
+<div class="input-group" aria-label="Input form: {{:PLACEHOLDER}}">
+    <input id="{{:ID}}" type="{{:TYPE}}" class="form-control" placeholder="{{:PLACEHOLDER}}" aria-label="{{:PLACEHOLDER}}">
     {{#:UNITS}}
     <span class="input-group-append">&nbsp;{{{:UNITS}}}&nbsp;</span>
     {{/:UNITS}}
@@ -103,6 +103,8 @@ html_templates["inputq_form"] = mt"""
 ## XXX add {{INLINE}}
 ## We do *not* use sibling elements, as suggested by Bootstrap here
 html_templates["Radioq"] = mt"""
+<fieldset style="border:0px">
+<legend style="display: none" aria-label="Select an item">Select an item</legend>
 {{#:ITEMS}}
 <div class="form-check">
     <label class="form-check-label" for="radio_{{:ID}}_{{:VALUE}}">
@@ -115,6 +117,7 @@ html_templates["Radioq"] = mt"""
     </label>
 </div>
 {{/:ITEMS}}
+</fieldset>
 """
 
 html_templates["radio_grading_script"] = """
@@ -283,23 +286,22 @@ document.querySelector('[id^="button_{{:ID}}-done"]').addEventListener("click",
 ## ----
 
 html_templates["Matchq"] = mt"""
-<table>
+<div style="display: grid;grid-template-columns: 1fr 5fr">
 {{#:ITEMS}}
-<tr>
-  <td>
-   <label for "select_{{:ID}}">{{{:QUESTION}}}</label>
-  </td>
-  <td>
-  <select name = "select_{{:ID}}" id="select_{{:ID}}">
+
+<div>
+  <select name = "select_{{:ID}}" id="select_{{:ID}}" aria-label="Select one">
      <option value=0 selected="selected">{{{:BLANK}}}</option>
      {{#:ANSWER_CHOICES}}
      <option value="{{:INDEX}}">{{{:LABEL}}}</option>
     {{/:ANSWER_CHOICES}}
   </select>
-  </td>
-<tr>
+</div>
+<div>{{{:QUESTION}}}</div>
+
 {{/:ITEMS}}
-</table>
+</div>
+
 """
 
 html_templates["matchq_grading_script"] = """
@@ -324,22 +326,25 @@ html_templates["matchq_grading_script"] = """
 ## ----
 
 html_templates["fill_in_blank_select"] = """
-  <select name = "select_{{:ID}}" id="select_{{:ID}}">
-     <option value=0 selected="selected">{{{:BLANK}}}</option>
+  <select name = "select_{{:ID}}" id="select_{{:ID}}" aria-label"Make a selection">
+     <option value="0" selected="selected">{{{:BLANK}}}</option>
      {{#:ANSWER_CHOICES}}
      <option value="{{:INDEX}}">{{{:LABEL}}}</option>
     {{/:ANSWER_CHOICES}}
   </select>
+<label for="select_{{:ID}}" style="left: -100vw; position: absolute;">Make a selection</label>
 """
 
 html_templates["fill_in_blank_input"] = """
-<input id="{{:ID}}" type="{{:TYPE}}" class="form-{{^:INLINE}}control{{/:INLINE}}" placeholder="{{:PLACEHOLDER}}">
+<input id="{{:ID}}" type="{{:TYPE}}" class="form-{{^:INLINE}}control{{/:INLINE}}" placeholder="{{:PLACEHOLDER}}" aria-label="Fill in the blank">
+<label for="{{:ID}}" style="left: -100vw; position: absolute;">Fill in the blank</label>
 """
 
+
 ## -------
 html_templates["hotspot"] = """
-<div>
-<img  id="hotspot_{{{:ID}}}" src="data:image/gif;base64,{{{:IMG}}}"/>
+<div aria-label="Hotspot question for selection from an image">
+<img  id="hotspot_{{{:ID}}}" alt="Image for hotspot selection" src="data:image/gif;base64,{{{:IMG}}}" />
 </div>
 """
 

src/show_methods.jl

@@ -1,7 +1,7 @@
 # This is called when converting radio button labels from LaTeX
 # adjust by setting ENV["QQ_LaTeX_delimiters"]
 function Markdown.tohtml(io::IO, l::Markdown.LaTeX)
-    o, c = get(ENV, "QQ_LaTeX_delimiters", ("\\(", "\\)"))
+    o, c = get(ENV, "QQ_LaTeX_delimiters", ("\$", "\$")) #("\\(", "\\)"))
     print(io, o) # not print(io, '$', '$')
     print(io, l.formula)
     print(io, c)