|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <title>Ptah Nifty Assignment Quiz</title> |
| 6 | + <style> |
| 7 | + body { font-family: Arial, sans-serif; margin: 20px; background: #f9f9f9; } |
| 8 | + h1 { color: #00274c; font-size: 2.2em; text-align: center; } |
| 9 | + .question { margin: 15px 0; padding: 15px; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } |
| 10 | + .question-title { font-weight: bold; } |
| 11 | + .options { margin-left: 20px; } |
| 12 | + .btn { padding: 10px 16px; background: #0055a4; color: #fff; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px; } |
| 13 | + .score { font-size: 1.2em; font-weight: bold; margin-top: 20px; } |
| 14 | + </style> |
| 15 | +</head> |
| 16 | +<body> |
| 17 | + <h1>Ptah: Nifty Assignment Quiz</h1> |
| 18 | + <p>Answer all questions below and click “Submit All” to see your score.</p> |
| 19 | + <form id="quizForm"></form> |
| 20 | + <button class="btn" onclick="submitQuiz()">Submit All</button> |
| 21 | + <div class="score" id="finalScore"></div> |
| 22 | + |
| 23 | + <script> |
| 24 | + // full 100-question array (titles, options, answers, points) |
| 25 | + const questions = [ |
| 26 | + // PQC (10) |
| 27 | + { title: 'Which PQC algorithm is standardized for digital signatures?', options:['CRYSTALS-Kyber','CRYSTALS-Dilithium','ASCON'], answer:'CRYSTALS-Dilithium', points:2 }, |
| 28 | + { title: 'CRYSTALS-Kyber is primarily a...', options:['Signature scheme','Key Encapsulation Mechanism','Hash function'], answer:'Key Encapsulation Mechanism', points:2 }, |
| 29 | + /* …add the remaining 98 questions here… */ |
| 30 | + ]; |
| 31 | + |
| 32 | + // Render all questions |
| 33 | + const form = document.getElementById('quizForm'); |
| 34 | + questions.forEach((q, idx) => { |
| 35 | + const div = document.createElement('div'); div.className='question'; |
| 36 | + const p = document.createElement('p'); p.className='question-title'; |
| 37 | + p.textContent = `${idx+1}. ${q.title}`; div.appendChild(p); |
| 38 | + const opts = document.createElement('div'); opts.className='options'; |
| 39 | + q.options.forEach(opt => { |
| 40 | + const label = document.createElement('label'); |
| 41 | + const inp = document.createElement('input'); inp.type='radio'; inp.name=`q${idx}`; inp.value=opt; |
| 42 | + label.appendChild(inp); label.append(opt); opts.appendChild(label); opts.appendChild(document.createElement('br')); |
| 43 | + }); |
| 44 | + div.appendChild(opts); |
| 45 | + form.appendChild(div); |
| 46 | + }); |
| 47 | + |
| 48 | + // Score calculation |
| 49 | + function submitQuiz() { |
| 50 | + let score = 0; |
| 51 | + questions.forEach((q, idx) => { |
| 52 | + const sel = document.querySelector(`input[name="q${idx}"]:checked`); |
| 53 | + if (sel && sel.value === q.answer) score += q.points; |
| 54 | + }); |
| 55 | + document.getElementById('finalScore').textContent = `Your Score: ${score} / ${questions.length * 2}`; |
| 56 | + } |
| 57 | + </script> |
| 58 | +</body> |
| 59 | +</html> |
0 commit comments