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) {