/* Scoped to #studentsdash-quiz so it won't affect other parts of the site */ #studentsdash-quiz {font-family: Arial, sans-serif; max-width:900px; margin:18px auto; border:1px solid #e0e0e0; padding:18px; border-radius:8px; background:#fff;} #studentsdash-quiz h2 {margin:0 0 12px; font-size:20px;} #studentsdash-quiz .meta {display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap;} #studentsdash-quiz input[type="text"].sd-username {padding:8px 10px; border:1px solid #ccc; border-radius:6px; min-width:200px;} #studentsdash-quiz button {padding:8px 12px; border-radius:6px; border:1px solid #888; background:#f4f4f4; cursor:pointer;} #studentsdash-quiz button:hover {filter:brightness(.98);} #studentsdash-quiz .questions {margin-top:12px;} #studentsdash-quiz .q {padding:10px; border-radius:6px; border:1px solid #f1f1f1; margin-bottom:10px; background:#fafafa;} #studentsdash-quiz .q h3 {margin:0 0 8px; font-size:15px;} #studentsdash-quiz .options label {display:block; cursor:pointer; padding:6px 8px; border-radius:4px; margin-bottom:6px;} #studentsdash-quiz .options input[type="radio"] {margin-right:8px;} #studentsdash-quiz .controls {display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;} #studentsdash-quiz .result {margin-top:14px; padding:12px; border-radius:6px; background:#eef7ff; border:1px solid #d1ecff;} #studentsdash-quiz .corrects {margin-top:12px;} #studentsdash-quiz .answer-correct {background:#e6ffed; border:1px solid #bdecc5; padding:8px; border-radius:6px;} #studentsdash-quiz .answer-wrong {background:#fff0f0; border:1px solid #f1bcbc; padding:8px; border-radius:6px;} #studentsdash-quiz .muted {color:#666; font-size:13px;} #studentsdash-quiz .small {font-size:13px;} #studentsdash-quiz .hidden {display:none;} #studentsdash-quiz .score-badge {font-weight:bold;} /* keep anything inside the quiz from inheriting site-wide link styles */ #studentsdash-quiz a {color:inherit; text-decoration:none;} Studentsdash — COS/CSC Quiz Enter your name: You can submit anytime. You don't need to answer all questions. Submit View Corrects Retake (function () { // Keep everything scoped so it won't leak to the global scope. const container = document.getElementById('studentsdash-quiz'); const questionsContainer = container.querySelector('#sd-questions'); const submitBtn = container.querySelector('#sd-submit'); const viewCorrectsBtn = container.querySelector('#sd-view-corrects'); const retakeBtn = container.querySelector('#sd-retake'); const resultBox = container.querySelector('#sd-result'); const correctsBox = container.querySelector('#sd-corrects'); const usernameInput = container.querySelector('#sd-username'); // Quiz data (original questions + added Q21-43) const quiz = [ { q: "What is the main function of a computer?", options: ["To perform calculations","To store information","To process data into information","To generate electricity"], answer: 2 }, { q: "Which of the following is a type of software?", options: ["Processor","RAM","Operating System","Hard Drive"], answer: 2 }, { q: "What does CPU stand for?", options: ["Central Processing Unit","Central Processing Unit","Control Process Unit","Computer Power Unit"], answer: 0 }, { q: "Which part of the computer is responsible for executing instructions?", options: ["CPU","Hard Drive","RAM","Monitor"], answer: 0 }, { q: "Which of the following is an input device?", options: ["Keyboard","Monitor","Printer","Speaker"], answer: 0 }, { q: "What is the smallest unit of data in a computer?", options: ["Byte","Bit","Kilobyte","Megabyte"], answer: 1 }, { q: "Which of the following is an example of an operating system?", options: ["Windows","Microsoft Office","Google Chrome","Photoshop"], answer: 0 }, { q: "What does RAM stand for?", options: ["Random Access Memory","Read Access Memory","Run Access Memory","Read-Only Memory"], answer: 0 }, { q: "Which of the following is a programming language?", options: ["HTML","CSS","Python","SQL"], answer: 2 }, { q: "What is the purpose of an operating system?", options: ["To compile programs","To manage hardware and software resources","To store data","To connect to the internet"], answer: 1 }, { q: "What is a variable in programming?", options: ["A storage location identified by a name","A programming language","A function that performs a task","A type of software"], answer: 0 }, { q: "Which of the following is a high-level programming language?", options: ["Assembly","Java","Machine Code","Binary"], answer: 1 }, { q: "What is the correct syntax to output \"Hello, World!\" in Python?", options: ["echo \"Hello, World!\"","print(\"Hello, World!\")","print(\"Hello, World!\")","System.out.println(\"Hello, World!\")"], answer: 1 }, { q: "Which of the following is a loop structure in programming?", options: ["If-Else","For","Switch","Case"], answer: 1 }, { q: "What is an algorithm?", options: ["A programming language","A software application","A step-by-step procedure to solve a problem","A type of hardware"], answer: 2 }, { q: "Which of the following is used to store multiple values in a single variable?", options: ["Integer","Array","String","Float"], answer: 1 }, { q: "What does IDE stand for in programming?", options: ["Integrated Development Environment","Integrated Development Environment","Internal Data Entry","Initial Data Execution"], answer: 0 }, { q: "What is the purpose of a compiler?", options: ["To translate source code into machine code","To run programs directly","To debug software","To write source code"], answer: 0 }, { q: "Which of the following is NOT a programming paradigm?", options: ["Procedural","Object-oriented","Functional","Database"], answer: 3 }, // Added questions (21-43 in your list) { q: "Which component is known as the brain of the computer?", options: ["CPU","RAM","Hard Drive","Motherboard"], answer: 0 }, { q: "What does GPU stand for?", options: ["General Processing Unit","Graphics Processing Unit","General Purpose Unit","Graphical Performance Unit"], answer: 1 }, { q: "Which of the following is a non-volatile storage device?", options: ["RAM","Cache","Hard Drive","Registers"], answer: 2 }, { q: "What is the primary function of the motherboard?", options: ["To connect all the components of the computer","To store data","To execute instructions","To provide power to the computer"], answer: 0 }, { q: "What is a peripheral device?", options: ["An external device that provides input and output for the computer","The main processor of the computer","The primary storage device","A type of software"], answer: 0 }, { q: "Which type of memory is used for temporary storage while a computer is running?", options: ["ROM","RAM","SSD","HDD"], answer: 1 }, { q: "What does SSD stand for?", options: ["Solid Software Drive","Solid State Drive","Secure Storage Drive","Standard State Drive"], answer: 1 }, { q: "Which device is used to connect a computer to a network?", options: ["CPU","Network Interface Card (NIC)","Hard Drive","RAM"], answer: 1 }, { q: "What is the function of a power supply unit (PSU) in a computer?", options: ["To convert electrical power from the outlet into a usable form for the computer","To store data","To process information","To manage software"], answer: 0 }, { q: "What type of device is a printer?", options: ["Output device","Input device","Storage device","Processing device"], answer: 0 }, { q: "Which of the following is a system software?", options: ["Operating System","Web Browser","Word Processor","Spreadsheet"], answer: 0 }, { q: "What is the function of an application software?", options: ["To perform specific tasks for the user","To manage hardware resources","To control the execution of programs","To provide a platform for programming"], answer: 0 }, { q: "What does GUI stand for?", options: ["General User Interface","Graphical User Interaction","Graphical User Interface","General User Interaction"], answer: 2 }, { q: "Which operating system is open-source?", options: ["Windows","Linux","macOS","iOS"], answer: 1 }, { q: "Which of the following is an example of utility software?", options: ["Microsoft Word","Adobe Photoshop","Antivirus Program","Google Chrome"], answer: 2 }, { q: "What is the primary purpose of a file system?", options: ["To compile programs","To manage files and directories on storage devices","To provide internet access","To run applications"], answer: 1 }, { q: "Which of the following is NOT a type of operating system?", options: ["WebOS","Windows","macOS","Linux"], answer: 0 }, { q: "What is multitasking in the context of operating systems?", options: ["The ability to run multiple applications simultaneously","The ability to process data faster","The ability to store more data","The ability to connect to multiple networks"], answer: 0 }, { q: "Which command is used to copy files in a Linux terminal?", options: ["mv","rm","cp","ls"], answer: 2 }, { q: "What is the kernel in an operating system?", options: ["The core part of the OS that manages system resources and hardware","The user interface","The file management system","The application layer"], answer: 0 }, { q: "What does IP stand for in networking?", options: ["Internet Protocol","Internal Process","Interface Program","Input Process"], answer: 0 }, { q: "Which of the following is NOT a type of network topology?", options: ["Star","Ring","Circle","Bus"], answer: 2 }, { q: "What is the main purpose of a router?", options: ["To direct data packets between networks","To store data","To connect devices within a network","To provide internet access"], answer: 0 } ]; // Render questions function renderQuiz() { questionsContainer.innerHTML = ''; quiz.forEach((item, idx) => { const qDiv = document.createElement('div'); qDiv.className = 'q'; qDiv.setAttribute('data-qindex', idx); const qTitle = document.createElement('h3'); qTitle.textContent = (idx + 1) + '. ' + item.q; qDiv.appendChild(qTitle); const optionsDiv = document.createElement('div'); optionsDiv.className = 'options'; item.options.forEach((opt, oi) => { const id = `sd-q${idx}-opt${oi}`; const label = document.createElement('label'); label.setAttribute('for', id); const input = document.createElement('input'); input.type = 'radio'; input.name = `sd-q-${idx}`; input.id = id; input.value = String(oi); // accessible: attach option text in a span const span = document.createElement('span'); span.textContent = opt; label.appendChild(input); label.appendChild(span); optionsDiv.appendChild(label); }); qDiv.appendChild(optionsDiv); questionsContainer.appendChild(qDiv); }); } // Compute score (counts only correct answers; unanswered are treated as not correct) function computeScore() { const answers = []; let correctCount = 0; let answeredCount = 0; quiz.forEach((item, idx) => { const selected = container.querySelector(`input[name="sd-q-${idx}"]:checked`); if (selected) { answeredCount++; const val = Number(selected.value); answers.push({ selected: val, correct: item.answer }); if (val === item.answer) correctCount++; } else { answers.push({ selected: null, correct: item.answer }); } }); return { correctCount, answeredCount, total: quiz.length, answers }; } // Show result message function showResult(name, scoreObj) { const { correctCount, answeredCount, total } = scoreObj; // The user wanted: "hi name ur studentsdash quiz score is" const safeName = (name || 'friend').trim(); resultBox.innerHTML = ''; const line = document.createElement('div'); line.innerHTML = `hi ${escapeHtml(safeName)} ur studentsdash quiz score is ${correctCount}/${total}`; resultBox.appendChild(line); const extra = document.createElement('div'); extra.className = 'muted small'; extra.textContent = `Answered: ${answeredCount} of ${total}. ${correctCount} correct.`; resultBox.appendChild(extra); resultBox.classList.remove('hidden'); viewCorrectsBtn.classList.remove('hidden'); retakeBtn.classList.remove('hidden'); } // Show correct answers and highlight user choices function showCorrects(answers) { correctsBox.innerHTML = ''; quiz.forEach((item, idx) => { const ans = answers[idx]; const wrapper = document.createElement('div'); wrapper.className = 'q'; const title = document.createElement('h3'); title.textContent = (idx + 1) + '. ' + item.q; wrapper.appendChild(title); // user's selection const userLine = document.createElement('div'); userLine.className = 'small'; if (ans.selected === null) { userLine.textContent = 'You did not answer this question.'; userLine.className += ' muted'; } else { userLine.textContent = 'Your answer: ' + item.options[ans.selected]; } wrapper.appendChild(userLine); // correct answer const correctLine = document.createElement('div'); correctLine.className = (ans.selected === ans.correct) ? 'answer-correct' : 'answer-wrong'; correctLine.textContent = 'Correct answer: ' + item.options[ans.correct]; wrapper.appendChild(correctLine); correctsBox.appendChild(wrapper); }); correctsBox.classList.remove('hidden'); // scroll to corrects for visibility correctsBox.scrollIntoView({behavior: 'smooth', block: 'start'}); } // Retake quiz: clear selections and hide results/corrects function retake() { // clear radio selections const radios = container.querySelectorAll('input[type="radio"]'); radios.forEach(r => r.checked = false); resultBox.classList.add('hidden'); correctsBox.classList.add('hidden'); viewCorrectsBtn.classList.add('hidden'); retakeBtn.classList.add('hidden'); resultBox.innerHTML = ''; correctsBox.innerHTML = ''; // focus username for quick retake usernameInput.focus(); } // Utility to escape HTML when injecting user name function escapeHtml(str) { return String(str).replace(/[&"']/g, function (m) { return {'&':'&','':'>','"':'"',"'":'''}[m]; }); } // Event listeners submitBtn.addEventListener('click', function () { const name = usernameInput.value || 'friend'; const scoreObj = computeScore(); showResult(name, scoreObj); // Hide previous corrects when submitting again correctsBox.classList.add('hidden'); correctsBox.innerHTML = ''; }); viewCorrectsBtn.addEventListener('click', function () { const scoreObj = computeScore(); showCorrects(scoreObj.answers); }); retakeBtn.addEventListener('click', function () { retake(); }); // Initialize renderQuiz(); })();
