Change default background color to meet WCAG 2.2 contrast guidelines and add label for screen readers to radio box

Author: liamjberrisford

jupyterquiz/dynamic/display.py

@@ -32,7 +32,7 @@ def display_quiz(ref, num=1_000_000, shuffle_questions=False,
 
     # Default color palette
     color_dict = {
-        '--jq-multiple-choice-bg': '#6f78ffff',
+        '--jq-multiple-choice-bg': '#392061',
         '--jq-mc-button-bg': '#fafafa',
         '--jq-mc-button-border': '#e0e0e0e0',
         '--jq-mc-button-inset-shadow': '#555555',

jupyterquiz/js/multiple_choice.js

@@ -218,31 +218,31 @@ function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {
     shuffled.forEach((item, index, ans_array) => {
         //console.log(answer);
 
+        // Make label for input element
+        var lab = document.createElement("label");
+        lab.className = "MCButton";
+        lab.id = id + '-' + index;
+        lab.onclick = check_mc;
+
         // Make input element
         var inp = document.createElement("input");
         inp.type = "radio";
         inp.id = "quizo" + id + index;
-        inp.style = "display:none;";
-        aDiv.append(inp);
+        inp.name = "mcgroup-" + id; // for grouping radios
+        inp.className = "sr-only"; // or "visually-hidden" or whatever you call it
+
+
+        lab.append(inp); // input is now inside the label
 
-        //Make label for input element
-        var lab = document.createElement("label");
-        lab.className = "MCButton";
-        lab.id = id + '-' + index;
-        lab.onclick = check_mc;
         var aSpan = document.createElement('span');
-        aSpan.classsName = "";
-        //qDiv.id="quizQn"+id+index;
         if ("answer" in item) {
             aSpan.innerHTML = jaxify(item.answer);
-            //aSpan.innerHTML=item.answer;
         }
         lab.append(aSpan);
 
         // Create div for code inside question
-        var codeSpan;
         if ("code" in item) {
-            codeSpan = document.createElement('span');
+            var codeSpan = document.createElement('span');
             codeSpan.id = "code" + id + index;
             codeSpan.className = "QuizCode";
             var codePre = document.createElement('pre');
@@ -251,11 +251,8 @@ function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {
             codePre.append(codeCode);
             codeCode.innerHTML = item.code;
             lab.append(codeSpan);
-            //console.log(codeSpan);
         }
 
-        //lab.textContent=item.answer;
-
         // Set the data attributes for the answer
         lab.setAttribute('data-correct', item.correct);
         if (item.correct) {
@@ -266,8 +263,10 @@ function make_mc(qa, shuffle_answers, outerqDiv, qDiv, aDiv, id) {
         }
         lab.setAttribute('data-answered', 0);
 
+        // Only append the label (input is inside)
         aDiv.append(lab);
 
+
     });
 
     if (num_correct > 1) {