I entered the css script, first in Bluefish editor and then uploaded the css by ssh,
but its not working. I see that when I check the source code css file online, I see this:
/*ticks and crosses*/
form#quiz .option label:after {
font-size: 1.1em;
font-weight: bold;
margin-left: 5px;
}
form#quiz .option input.true:checked + label:after {
content: '✔';
color: green;
}
form#quiz .option input.false:checked + label:after {
content: '✘';
color: red;
}
The tick mark and X look a bit strange. But in Bluefish editor they were like this:
/*ticks and crosses*/
form#quiz .option label:after {
font-size: 1.1em;
font-weight: bold;
margin-left: 5px;
}
In an
form#quiz .option input.true:checked + label:after {
content: '✔';
color: green;
}
form#quiz .option input.false:checked + label:after {
content: '✘';
color: red;
}
my javascript ( idioms.js - source code online)
// put code inside of an IIFE, so as to avoid conflicts with global variables
(function () {
const answers = {
one: 'c',
two: 'b',
three: 'c',
four: 'b',
five: 'a',
six: 'b',
seven: 'b',
eight: 'c',
nine: 'a',
ten: 'c',
eleven: 'b'
};
window.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('quiz');
const log = document.getElementById('log');
// This line added to get a count of the questions.
const numQuestions = form.querySelectorAll('.question').length;
form.addEventListener(
'submit', (event) => {
event.preventDefault();
let numCorrect = 0;
for (const input of form.elements) {
if (input.checked) {
const isCorrect = input.value === answers[input.name];
// will add boolean as a string e.g. 'true' or 'false'
input.classList.add(isCorrect.toString());
if (isCorrect) numCorrect++;
}
}
log.textContent = `${numCorrect} correct answers out of ${numQuestions}`;
}
);
form.addEventListener(
'change', (event) => {
// get the parent fieldset of this changed input
const fieldset = event.target.closest('fieldset');
for (const input of fieldset.elements) {
// clear true or false classes in this fieldset
input.classList.remove('true', 'false');
}
}
);
form.addEventListener('reset', (event) => (log.textContent = ''));
});
}());
and my html:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width,
initial-scale=1.0'>
<title>Idioms</title>
<link rel='stylesheet' href='./public/css/main.css'>
</head>
<body>
<div id='quiz-container' class='container'>
<form id='quiz'>
<h2>Quiz: Well known sayings</h2>
<!-- They succeeded in spite of many difficulties. -->
<fieldset class='question'>
<legend>1: They succeeded in spite of many
difficulties.</legend>
<div class='option'>
<input type='radio' id='answer_1_a' name='one'
value='a'>
<label for='answer_1_a'>They succeeded in the
odds</label>
</div>
<div class='option'>
<input type='radio' id='answer_1_b' name='one'
value='b'>
<label for='answer_1_b'>They succeeded over the
adds.</label>
</div>
<div class='option'>
<input type='radio' id='answer_1_c' name='one'
value='c'>
<label for='answer_1_c'>They succeeded against the
odds.</label>
</div>
</fieldset>
<!-- The advantages and disadvantages. -->
<fieldset class='question'>
<legend>2: The advantages and disadvantages.</legend>
<div class='option'>
<input type='radio' id='answer_2_a' name='two'
value='a'>
<label for='answer_2_a'>The fors and
againsts.</label>
</div>
<div class='option'>
<input type='radio' id='answer_2_b' name='two'
value='b'>
<label for='answer_2_b'>The pros and cons.</label>
</div>
<div class='option'>
<input type='radio' id='answer_2_c' name='two'
value='c'>
<label for='answer_2_c'>The pros and antis.</label>
</div>
</fieldset>
<!-- He reconsidered. -->
<fieldset class='question'>
<legend>3: He reconsidered.</legend>
<div class='option'>
<input type='radio' id='answer_3_a' name='three'
value='a'>
<label for='answer_3_a'>He had different opinions.</label>
</div>
<div class='option'>
<input type='radio' id='answer_3_b' name='three'
value='b'>
<label for='answer_3_b'>He had another thought.</label>
</div>
<div class='option'>
<input type='radio' id='answer_3_c' name='three'
value='c'>
<label for='answer_3_c'>He had second thoughts.</label>
</div>
</fieldset>
<!-- He's recovering from an illness. -->
<fieldset class='question'>
<legend>4: He's recovering from an illness.</legend>
<div class='option'>
<input type='radio' id='answer_4_a' name='four'
value='a'>
<label for='answer_4_a'>He's on the fiddle.</label>
</div>
<div class='option'>
<input type='radio' id='answer_4_b' name='four'
value='b'>
<label for='answer_4_b'>He's on the mend.</label>
</div>
<div class='option'>
<input type='radio' id='answer_4_c' name='four'
value='c'>
<label for='answer_4_c'>He's on his bike.</label>
</div>
</fieldset>
<!-- The advantages and disadvantages. -->
<fieldset class='question'>
<legend>5: They are reasonably rich.</legend>
<div class='option'>
<input type='radio' id='answer_5_a' name='five'
value='a'>
<label for='answer_5_a'>They are well to do.</label>
</div>
<div class='option'>
<input type='radio' id='answer_5_b' name='five'
value='b'>
<label for='answer_5_b'>They are well and good.</label>
</div>
<div class='option'>
<input type='radio' id='answer_5_c' name='five'
value='c'>
<label for='answer_5_c'>They are counting their blseeings.</label>
</div>
</fieldset>
<!-- It happened completely unexpectedly. -->
<fieldset class='question'>
<legend>6: It happened completely unexpectedly..</legend>
<div class='option'>
<input type='radio' id='answer_6_a' name='six'
value='a'>
<label for='answer_6_a'>It happened on the bounce.</label>
</div>
<div class='option'>
<input type='radio' id='answer_6_b' name='six'
value='b'>
<label for='answer_6_b'>It happened out of the blue.</label>
</div>
<div class='option'>
<input type='radio' id='answer_6_c' name='six'
value='c'>
<label for='answer_6_c'>It happened out of thin air.</label>
</div>
</fieldset>
<!-- She'e really fit!. -->
<fieldset class='question'>
<legend>7: She'e really fit!..</legend>
<div class='option'>
<input type='radio' id='answer_7_a' name='seven'
value='a'>
<label for='answer_7_a'>She's fitter than a bell!.</label>
</div>
<div class='option'>
<input type='radio' id='answer_7_b' name='seven'
value='b'>
<label for='answer_7_b'>She's as fit as a fiddle.</label>
</div>
<div class='option'>
<input type='radio' id='answer_7_c' name='seven'
value='c'>
<label for='answer_7_c'>She's as fit as a drum!.</label>
</div>
</fieldset>
<!-- Don't complain about a present. -->
<fieldset class='question'>
<legend>8: Don't complain about a present.</legend>
<div class='option'>
<input type='radio' id='answer_8_a' name='eight'
value='a'>
<label for='answer_8_a'>Don't look at a horse's teeth.</label>
</div>
<div class='option'>
<input type='radio' id='answer_8_b' name='eight'
value='b'>
<label for='answer_8_b'>Don't ask about the price.</label>
</div>
<div class='option'>
<input type='radio' id='answer_8_c' name='eight'
value='c'>
<label for='answer_8_c'> Don't look a gift horse in thr mouth.</label>
</div>
</fieldset>
<!-- She very nearly bought the house. -->
<fieldset class='question'>
<legend>9: She very nearly bought the house.</legend>
<div class='option'>
<input type='radio' id='answer_9_a' name='two'
value='a'>
<label for='answer_9_a'>She was on the brink of buying the house.</label>
</div>
<div class='option'>
<input type='radio' id='answer_9_b' name='two'
value='b'>
<label for='answer_9_b'>She was on the edge of buying the house.</label>
</div>
<div class='option'>
<input type='radio' id='answer_9_c' name='two'
value='c'>
<label for='answer_9_c'>She was on her toes about buying the house.</label>
</div>
</fieldset>
<!-- He accidently revealed the truth. -->
<fieldset class='question'>
<legend>10: He accidently revealed the truth.</legend>
<div class='option'>
<input type='radio' id='answer_10_a' name='ten'
value='a'>
<label for='answer_10_a'>He let the dog bark.</label>
</div>
<div class='option'>
<input type='radio' id='answer_10_b' name='ten'
value='b'>
<label for='answer_10_b'>He let the bird out of the cage.</label>
</div>
<div class='option'>
<input type='radio' id='answer_10_c' name='ten'
value='c'>
<label for='answer_10_c'>He let the cat out of the bag.</label>
</div>
</fieldset>
<!-- It made me think. -->
<fieldset class='question'>
<legend>11: The advantages and disadvantages.</legend>
<div class='option'>
<input type='radio' id='answer_11_a' name='eleven'
value='a'>
<label for='answer_11_a'>It was a penney for my thoughts.</label>
</div>
<div class='option'>
<input type='radio' id='answer_11_b' name='eleven'
value='b'>
<label for='answer_11_b'>It gave me food for thought.</label>
</div>
<div class='option'>
<input type='radio' id='answer_11_c' name='two'
value='c'>
<label for='answer_11_c'>It gave me my thinking cap.</label>
</div>
</fieldset>
<div class='buttons-group'>
<button type='submit'>Submit</button>
<button type='reset'>Reset</button>
</div>
</form>
<output id='log'></output>
</div>
<!-- link to Javascript file -->
<script src='./public/js/main.js'></script>
</body>
</html>
I must be doing something wrong? Thanks.