From 46b1e38cef777c90341b6fba77aea7edeb7cb926 Mon Sep 17 00:00:00 2001
From: Liam J Berrisford <liam.j.berrisford@bath.edu>
Date: Wed, 16 Jul 2025 09:49:27 +0100
Subject: [PATCH] Change default background color to meet WCAG 2.2 contrast
 guidelines and add label for screen readers to radio box

---
 jupyterquiz/dynamic/display.py    |  2 +-
 jupyterquiz/js/multiple_choice.js | 29 ++++++++++++++---------------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/jupyterquiz/dynamic/display.py b/jupyterquiz/dynamic/display.py
index 9c1b9c2..86201c8 100644
--- a/jupyterquiz/dynamic/display.py
+++ b/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',
diff --git a/jupyterquiz/js/multiple_choice.js b/jupyterquiz/js/multiple_choice.js
index 9143b86..9479d0f 100644
--- a/jupyterquiz/js/multiple_choice.js
+++ b/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) {