Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
<style>
/* body {
background: #fffdeb;
} */
/* div.practice {
padding: 0;
} */
span.yesno {
font-family:'Courier New', Courier, monospace;
font-size: 120%;
}
span.yes {
font-family:'Courier New', Courier, monospace;
color: #14be10;
font-size: 120%;
}
span.no {
font-family:'Courier New', Courier, monospace;
color: #ec3030;
font-weight: bold;
font-size: 120%;
}
input.mono {
font-family: monospace;
}
table.quiz,
table.quiz-code,
table.quiz-select,
table.quiz tr,
table.quiz-code tr,
table.quiz-select tr,
table.quiz tr td,
table.quiz-code tr td,
table.quiz-select tr td {
/* background-color: #fffdeb; */
background-color: white;
border: none;
}
table.quiz,
table.quiz-code,
table.quiz-select {
/* background-color: #fffdeb; */
background-color: white;
}
table.quiz tr,
table.quiz-code tr,
table.quiz-select tr {
border: none;
}
table.quiz td,
table.quiz-code td,
table.quiz-select td {
border: none;
/* background-color: #fffdeb; */
background-color: white;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
padding: 0.3em 1em 0.3em 1em;
}
table.quiz tr td code,
table.quiz-code tr td code,
table.quiz-select tr td code,
table.quiz tr td tt,
table.quiz-code tr td tt,
table.quiz-select tr td tt {
/* background-color: #fffdeb !important; */
background-color: white !important;
}
table.quiz tr td.code,
table.quiz-code tr td.code,
table.quiz-select tr td.code {
font-family: monospace;
font-size: 95%;
}
table.quiz tr td.comment,
table.quiz-code tr td.comment,
table.quiz-select tr td.comment {
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}
table.quiz tr td.comment code,
table.quiz-code tr td.comment code,
table.quiz-select tr td.comment code {
padding: 0;
}
table.quiz-code tr td {
padding-top: 0.4em;
padding-bottom: 0.4em;
}
table.quiz-code tr td input {
border: 1px solid lightgray;
text-align: center;
}
/* div.practice {
background-color: #fffdeb;
background-color: white;
} */
table.quiz-code.nocode td.code {
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
}
div.extended-explanation {
display: none;
}
div.comment {
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}
</style>
<script>
let replacements = [];
document.querySelectorAll('table.quiz tr').forEach(function(item) {
item.innerHTML = '<td><span class="yesno">&nbsp;</span></td>' + item.innerHTML;
let cells = item.querySelectorAll('td');
if (cells[1].innerHTML == '1') {
cells[1].innerHTML = '<input type="checkbox" data-ok="1">';
}
else if (cells[1].innerHTML == '0') {
cells[1].innerHTML = '<input type="checkbox" data-ok="0">';
}
cells[2].className = 'code';
if (cells.length > 3) {
cells[3].style.display = 'none';
cells[3].className = 'comment';
}
});
document.querySelectorAll('table.quiz-code.fill').forEach(function(table) {
table.querySelectorAll('tr').forEach(function(tr) {
tr.className = 'fill';
});
});
document.querySelectorAll('table.quiz-code tr').forEach(function(item) {
let is_fill = item.className == 'fill';
item.innerHTML = '<td><span class="yesno">&nbsp;</span></td>' + item.innerHTML;
let cells = item.querySelectorAll('td');
let answer = cells[1].innerHTML;
cells[1].style.display = 'none';
cells[2].className = 'code';
if (cells.length > 3) {
cells[3].style.display = 'none';
cells[3].className = 'comment';
}
let raw_answers = cells[1].innerHTML.split(' ');
for (let c = 0; c != raw_answers.length; c++) {
raw_answers[c] = raw_answers[c].replace(/␣/g, ' ');
}
let answers = [];
let fills = [];
if (!is_fill) {
answers = raw_answers;
}
else {
for (let c = 0; c < raw_answers.length; c += 2) {
console.log('c=', c);
answers.push(raw_answers[c]);
fills.push(raw_answers[c + 1]);
}
}
if (cells[2].innerHTML.indexOf('␣') != -1) {
let c = 0;
cells[2].innerHTML = cells[2].innerHTML.replace(/␣+/g, function(a, b) {
let length = a.length * 1.2;
let ret = '<input type="text" class="mono" style="width: ' + length + 'em;" data-ok="' + answers[c] + '"';
if (is_fill) {
ret += ' value="' + fills[c] + '"';
}
ret += '/>';
c++;
return ret;
});
}
});
document.querySelectorAll('table.quiz-select tr').forEach(function(item) {
item.innerHTML = '<td><span class="yesno">&nbsp;</span></td>' + item.innerHTML;
let cells = item.querySelectorAll('td');
let answer = cells[1].innerHTML.trim();
cells[1].style.display = 'none';
// cells[2].className = 'code';
if (cells.length > 3) {
cells[3].style.display = 'none';
cells[3].className = 'comment';
}
let question = cells[2].innerHTML;
let q_from = question.indexOf('(:');
let q_to = question.indexOf(':)');
if (q_from != -1 && q_to != -1) {
let values = question.substring(q_from + 2, q_to).trim();
let values_items = values.split(',');
let select = '<select data-ok="' + answer + '"><option value=""></option>';
for (let c = 0; c != values_items.length; c++) {
let value = values_items[c].trim();
select += '<option value="' + value + '">' + value + '</option>';
}
select += '</select>';
cells[2].innerHTML = question.substring(0, q_from) + select + question.substring(q_to + 2);
}
});
function checkquiz() {
document.getElementById('ShowAnswers').style.display = 'none';
document.querySelectorAll('table.quiz input[type="checkbox"]').forEach(function(item) {
let is_correct = (item.checked && item.dataset.ok == 1) || (!item.checked && item.dataset.ok == 0);
let row = item.parentElement.parentElement;
row.querySelector('td').innerHTML = is_correct ? '<span class="yes">✓</span>' : '<span class="no">✘</span>';
});
document.querySelectorAll('table.quiz tr td').forEach(function(item) {
item.style.display = '';
});
let show_correct_button = false;
document.querySelectorAll('table.quiz-code tr').forEach(function(item) {
let inputs = item.querySelectorAll('input');
if (!inputs.length) return;
let correct = 0;
for (let c = 0; c != inputs.length; c++) {
let curr_value = inputs[c].value.trim();
for (var ir = 0; ir != replacements.length; ir++) {
curr_value = curr_value.replace(replacements[ir][0], replacements[ir][1]); // once only
}
if (curr_value == inputs[c].dataset.ok) {
correct++;
}
else {
show_correct_button = true;
break;
}
}
let is_correct = correct == inputs.length;
let tds = item.querySelectorAll('td');
tds[0].innerHTML = is_correct ? '<span class="yes">✓</span>' : '<span class="no">✘</span>';
if (tds.length > 3) {
tds[3].style.display = '';
}
});
document.querySelectorAll('table.quiz-select tr').forEach(function(item) {
let selects = item.querySelectorAll('select');
if (!selects.length) return;
let correct = 0;
for (let c = 0; c != selects.length; c++) {
if (selects[c].value == selects[c].dataset.ok) {
correct++;
}
else {
show_correct_button = true;
break;
}
}
let is_correct = correct == selects.length;
let tds = item.querySelectorAll('td');
tds[0].innerHTML = is_correct ? '<span class="yes">✓</span>' : '<span class="no">✘</span>';
if (tds.length > 3) {
tds[3].style.display = '';
}
});
if (show_correct_button) {
document.getElementById('ShowAnswers').style.display = '';
}
show_extended_explanation();
}
function showanswers() {
document.querySelectorAll('table.quiz tr').forEach(function(item) {
let cells = item.querySelectorAll('td');
console.log(cells);
if (!cells.length) return;
let input = cells[1].querySelector('input');
if (!input) return;
input.checked = input.dataset.ok == '1';
});
document.querySelectorAll('table.quiz-code tr').forEach(function(item) {
let inputs = item.querySelectorAll('input');
if (!inputs.length) return;
for (let c = 0; c != inputs.length; c++) {
inputs[c].value = inputs[c].dataset.ok;
}
});
document.querySelectorAll('table.quiz-select tr').forEach(function(item) {
let selects = item.querySelectorAll('select');
if (!selects.length) return;
for (let c = 0; c != selects.length; c++) {
selects[c].value = selects[c].dataset.ok;
}
});
show_extended_explanation();
}
function show_extended_explanation() {
document.querySelectorAll('.extended-explanation').forEach(function(item) {
item.className = 'comment';
});
}
</script>
<div style="margin: 3em 0;">
<button onclick="checkquiz()">Check the answers</button>
<button onclick="showanswers()" id="ShowAnswers" style="display: none;">Show correct answers</button>
</div>