Untitled
unknown
plain_text
5 months ago
3.3 kB
6
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Online Test</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f9; } .container { width: 90%; max-width: 800px; margin: 20px auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } .question { margin-bottom: 20px; } .question p { font-weight: bold; } .options { list-style: none; padding: 0; } .options li { margin: 10px 0; } button { background-color: #4CAF50; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #45a049; } .result { font-weight: bold; text-align: center; margin-top: 20px; } </style> </head> <body> <div class="container"> <h1>Online Test</h1> <form id="quizForm"> <div class="question"> <p>1. What is the capital of France?</p> <ul class="options"> <li><input type="radio" name="q1" value="Paris"> Paris</li> <li><input type="radio" name="q1" value="London"> London</li> <li><input type="radio" name="q1" value="Rome"> Rome</li> <li><input type="radio" name="q1" value="Berlin"> Berlin</li> </ul> </div> <div class="question"> <p>2. Which programming language is known as the backbone of web development?</p> <ul class="options"> <li><input type="radio" name="q2" value="Python"> Python</li> <li><input type="radio" name="q2" value="JavaScript"> JavaScript</li> <li><input type="radio" name="q2" value="Java"> Java</li> <li><input type="radio" name="q2" value="C++"> C++</li> </ul> </div> <button type="button" onclick="checkAnswers()">Submit</button> </form> <div id="result" class="result"></div> </div> <script> function checkAnswers() { const answers = { q1: "Paris", q2: "JavaScript", }; let score = 0; const form = document.getElementById("quizForm"); const resultDiv = document.getElementById("result"); for (const [question, correctAnswer] of Object.entries(answers)) { const selected = form.elements[question].value; if (selected === correctAnswer) { score++; } } resultDiv.textContent = `Your score is ${score} out of ${Object.keys(answers).length}`; } </script> </body> </html>
Editor is loading...
Leave a Comment