Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Quiz</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } .question { margin-bottom: 15px; } button { margin-top: 20px; } </style> </head> <body> <h1>Simple Quiz</h1> <form id="quizForm"> <div class="question"> <p>1. What is the capital of France?</p> <label><input type="radio" name="q1" value="Paris"> Paris</label><br> <label><input type="radio" name="q1" value="London"> London</label><br> <label><input type="radio" name="q1" value="Berlin"> Berlin</label> </div> <div class="question"> <p>2. What is 5 + 3?</p> <label><input type="radio" name="q2" value="7"> 7</label><br> <label><input type="radio" name="q2" value="8"> 8</label><br> <label><input type="radio" name="q2" value="9"> 9</label> </div> <button type="button" onclick="checkAnswers()">Submit</button> </form> <p id="result"></p> <script> function checkAnswers() { const answers = { q1: "Paris", q2: "8" }; let score = 0; const form = document.getElementById("quizForm"); for (let question in answers) { const userAnswer = form[question].value; if (userAnswer === answers[question]) { score++; } } document.getElementById("result").textContent = `Your score: ${score}/2`; } </script> </body> </html>
Leave a Comment