Are you a good digital citizen?

🌐 Are You a Good Digital Citizen? Read the information and complete the True / False and Gap Fill activities. Question 1 of 20 Score: 0 #digital-citizen-test { max-width: 720px; margin: 30px auto; padding: 25px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 14px; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 5px 15px rgba(0,0,0,0.06); box-sizing: border-box; } #digital-citizen-test * { box-sizing: border-box; } /* HEADER */ .dc-header { text-align: center; margin-bottom: 25px; } .dc-header h2 { margin: 0 0 8px; color: #2c3e50; font-size: 28px; } .dc-header p { margin: 0; color: #7f8c8d; font-size: 15px; } /* PROGRESS */ .dc-progress-box { margin-bottom: 25px; } .dc-progress-info { display: flex; justify-content: space-between; margin-bottom: 8px; color: #566573; font-size: 14px; } .dc-progress-info strong { color: #2c3e50; } .dc-progress-bar { height: 9px; background: #ecf0f1; border-radius: 10px; overflow: hidden; } #dc-progress-fill { width: 5%; height: 100%; background: #3498db; border-radius: 10px; transition: width .3s ease; } /* QUESTION */ .dc-card { background: #ffffff; padding: 25px; border-radius: 10px; border-left: 5px solid #3498db; box-shadow: 0 3px 8px rgba(0,0,0,0.04); } .dc-type { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #3498db; font-weight: bold; margin-bottom: 10px; } .dc-question { font-size: 18px; line-height: 1.6; font-weight: 600; color: #2c3e50; margin-bottom: 20px; } /* TRUE FALSE */ .dc-tf-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .dc-tf-button { padding: 14px; border: 1px solid #dcdde1; border-radius: 7px; background: #f8f9fa; cursor: pointer; font-size: 16px; font-weight: 600; transition: .2s; } .dc-tf-button:hover:not(:disabled) { background: #e1b12c; color: white; border-color: #e1b12c; } .dc-tf-button.correct { background: #2ecc71 !important; color: white !important; border-color: #2ecc71 !important; } .dc-tf-button.incorrect { background: #e74c3c !important; color: white !important; border-color: #e74c3c !important; } /* GAP FILL */ .dc-gap-wrapper { margin-top: 10px; } .dc-gap-input { width: 100%; padding: 14px; border: 2px solid #dcdde1; border-radius: 7px; font-size: 16px; outline: none; } .dc-gap-input:focus { border-color: #3498db; } .dc-submit { width: 100%; margin-top: 12px; padding: 13px; background: #3498db; color: white; border: none; border-radius: 7px; font-size: 15px; font-weight: bold; cursor: pointer; } .dc-submit:hover { background: #2980b9; } /* FEEDBACK */ .dc-feedback { margin-top: 18px; padding: 14px 16px; border-radius: 7px; font-size: 14px; line-height: 1.6; } .dc-feedback.correct { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } .dc-feedback.incorrect { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } /* NEXT */ .dc-next { width: 100%; margin-top: 18px; padding: 13px; background: #2c3e50; color: white; border: none; border-radius: 7px; font-size: 15px; font-weight: bold; cursor: pointer; } .dc-next:hover { background: #1f2d3a; } /* RESULT */ #dc-result { text-align: center; margin-top: 25px; padding: 30px 20px; background: #ebf3f9; border-radius: 10px; } .dc-result-title { font-size: 28px; font-weight: bold; color: #2c3e50; } .dc-result-score { font-size: 42px; font-weight: bold; color: #3498db; margin: 12px 0; } .dc-result-message { color: #566573; line-height: 1.6; margin-bottom: 20px; } .dc-restart { padding: 12px 25px; background: #2c3e50; color: white; border: none; border-radius: 7px; cursor: pointer; font-weight: bold; } /* MOBILE */ @media (max-width: 600px) { #digital-citizen-test { margin: 15px auto; padding: 18px; } .dc-header h2 { font-size: 23px; } .dc-card { padding: 18px; } .dc-question { font-size: 16px; } .dc-tf-buttons { grid-template-columns: 1fr; } } document.addEventListener("DOMContentLoaded", function () { const quizData = [ /* TRUE / FALSE */ { type: "TRUE / FALSE", question: "You should believe everything you see online.", answer: "False", reason: "False. The quiz says that you should check whether information is true before believing it." }, { type: "TRUE / FALSE", question: "A good digital citizen thinks carefully about information found online.", answer: "True", reason: "True. Checking information carefully is an important part of being a good digital citizen." }, { type: "TRUE / FALSE", question: "A good digital citizen is interested in every kind of modern technology.", answer: "False", reason: "False. The quiz asks whether you are interested in modern technology, but being interested in everything is not necessary." }, { type: "TRUE / FALSE", question: "You should think carefully about what you say and do online.", answer: "True", reason: "True. The quiz recommends thinking carefully before posting or communicating online." }, { type: "TRUE / FALSE", question: "Privacy settings and passwords are important for staying safe online.", answer: "True", reason: "True. The quiz specifically mentions privacy settings and passwords." }, { type: "TRUE / FALSE", question: "There are no dangers online, so you do not need to worry about online safety.", answer: "False", reason: "False. The quiz warns that there are dangers online and that users should learn how to stay safe." }, { type: "TRUE / FALSE", question: "You should share every photo if the answer to a question is 'yes'.", answer: "False", reason: "False. You should think carefully before sharing a photo, even if you would like to share it." }, { type: "TRUE / FALSE", question: "People should think about what other people might think before sharing photos.", answer: "True", reason: "True. The quiz encourages users to consider how other people may feel about shared photos." }, { type: "TRUE / FALSE", question: "A good digital citizen knows something about copyright and online laws.", answer: "True", reason: "True. The quiz asks about following your country's laws online and respecting other people's work." }, { type: "TRUE / FALSE", question: "Copying other people's work online is always acceptable.", answer: "False", reason: "False. A good digital citizen should respect other people's work and copyright." }, /* GAP FILL */ { type: "GAP FILL", question: "You should check that information you see online is ______.", answer: "true", reason: "The quiz says: 'I always check that information is true.'" }, { type: "GAP FILL", question: "You should think carefully about what you are ______ online.", answer: "saying", alternatives: ["say"], reason: "The quiz advises users to think carefully about what they are saying and doing online." }, { type: "GAP FILL", question: "You should be careful about your privacy settings and ______.", answer: "passwords", reason: "The quiz specifically mentions privacy settings and passwords." }, { type: "GAP FILL", question: "You should think carefully before you ______ a photo.", answer: "share", reason: "The quiz asks whether you think carefully before you share a photo." }, { type: "GAP FILL", question: "People should think about what other people might ______ before sharing photos.", answer: "think", reason: "The quiz says that you should consider what other people think before sharing photos." }, { type: "GAP FILL", question: "You should follow your country's ______ online.", answer: "laws", reason: "The quiz asks whether you follow your country's laws online." }, { type: "GAP FILL", question: "You should not copy other people's ______.", answer: "work", reason: "The quiz specifically says: 'I know not to copy other people's work.'" }, { type: "GAP FILL", question: "A good digital citizen uses technology in a safe and ______ way.", answer: "sensible", reason: "The final result says that a good digital citizen knows how to use technology in a safe and sensible way." }, { type: "GAP FILL", question: "You should learn how to behave ______.", answer: "online", reason: "The final result says that students should learn how to behave online." }, { type: "GAP FILL", question: "Technology can be used for study and ______.", answer: "play", reason: "The final result says that a good digital citizen knows how to enjoy technology for study and play." } ]; let currentQuestion = 0; let score = 0; const questionContainer = document.getElementById("dc-question-container"); const resultContainer = document.getElementById("dc-result"); const currentDisplay = document.getElementById("dc-current"); const totalDisplay = document.getElementById("dc-total"); const scoreDisplay = document.getElementById("dc-score"); const progressFill = document.getElementById("dc-progress-fill"); totalDisplay.textContent = quizData.length; function loadQuestion() { const q = quizData[currentQuestion]; currentDisplay.textContent = currentQuestion + 1; scoreDisplay.textContent = score; progressFill.style.width = ((currentQuestion + 1) / quizData.length * 100) + "%"; let html = ` ${q.type} ${currentQuestion + 1}. ${q.question} `; if (q.type === "TRUE / FALSE") { html += ` ✓ True ✗ False `; } else { html += ` Check Answer `; } html += ` `; questionContainer.innerHTML = html; if (q.type === "TRUE / FALSE") { const buttons = document.querySelectorAll(".dc-tf-button"); buttons.forEach(function(button) { button.addEventListener("click", function() { checkTF( this.getAttribute("data-answer"), buttons ); }); }); } else { document .getElementById("dc-gap-submit") .addEventListener( "click", checkGap ); document .getElementById("dc-gap-input") .addEventListener( "keydown", function(event) { if (event.key === "Enter") { checkGap(); } } ); } } function showFeedback( isCorrect, explanation, correctAnswer ) { const feedback = document.getElementById("dc-feedback"); if (isCorrect) { feedback.className = "dc-feedback correct"; feedback.innerHTML = "✓ Correct!" + explanation; } else { feedback.className = "dc-feedback incorrect"; feedback.innerHTML = "✗ Incorrect." + explanation + "" + "Correct answer: " + correctAnswer; } feedback.style.display = "block"; if (currentQuestion < quizData.length - 1) { const nextButton = document.createElement("button"); nextButton.className = "dc-next"; nextButton.textContent = "Next Question →"; nextButton.addEventListener( "click", function() { currentQuestion++; loadQuestion(); window.scrollTo({ top: questionContainer.offsetTop - 20, behavior: "smooth" }); } ); feedback.parentNode.appendChild( nextButton ); } else { const finishButton = document.createElement("button"); finishButton.className = "dc-next"; finishButton.textContent = "View My Result"; finishButton.addEventListener( "click", showResult ); feedback.parentNode.appendChild( finishButton ); } } function checkTF( selectedAnswer, buttons ) { const q = quizData[currentQuestion]; buttons.forEach(function(button) { button.disabled = true; }); const selectedButton = Array.from(buttons).find( function(button) { return button.getAttribute("data-answer") === selectedAnswer; } ); const isCorrect = selectedAnswer === q.answer; if (isCorrect) { score++; selectedButton.classList.add( "correct" ); } else { selectedButton.classList.add( "incorrect" ); const correctButton = Array.from(buttons).find( function(button) { return button.getAttribute("data-answer") === q.answer; } ); correctButton.classList.add( "correct" ); } scoreDisplay.textContent = score; showFeedback( isCorrect, q.reason, q.answer ); } function checkGap() { const q = quizData[currentQuestion]; const input = document.getElementById("dc-gap-input"); const userAnswer = input.value.trim().toLowerCase(); if (userAnswer === "") { input.focus(); return; } input.disabled = true; document .getElementById("dc-gap-submit") .disabled = true; let acceptedAnswers = [ q.answer.toLowerCase() ]; if (q.alternatives) { q.alternatives.forEach( function(answer) { acceptedAnswers.push( answer.toLowerCase() ); } ); } const isCorrect = acceptedAnswers.includes( userAnswer ); if (isCorrect) { score++; } scoreDisplay.textContent = score; showFeedback( isCorrect, q.reason, q.answer ); } function showResult() { questionContainer.style.display = "none"; const percentage = Math.round( score / quizData.length * 100 ); let message; if (percentage >= 90) { message = "Excellent! You are very good at understanding the rules of responsible digital citizenship."; } else if (percentage >= 75) { message = "Very good! You understand most of the important ideas about being a good digital citizen."; } else if (percentage >= 60) { message = "Good effort! Review privacy, online safety, copyright and responsible sharing."; } else { message = "Keep practising! Go back to the text and review the main ideas about safe and sensible online behaviour."; } resultContainer.innerHTML = ` Test Complete! ${score} / ${quizData.length} ${percentage}% ${message} ↻ Restart Test `; resultContainer.style.display = "block"; document .getElementById("dc-restart") .addEventListener( "click", restartQuiz ); resultContainer.scrollIntoView({ behavior: "smooth", block: "center" }); } function restartQuiz() { currentQuestion = 0; score = 0; resultContainer.style.display = "none"; questionContainer.style.display = "block"; scoreDisplay.textContent = "0"; loadQuestion(); window.scrollTo({ top: questionContainer.offsetTop - 20, behavior: "smooth" }); } loadQuestion(); });