Duplicate Snippet
Embed Snippet on Your Site
Austria quiz
html | |
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>Austria Quiz</title>
|
| <style>
|
| body {
|
| font-family: Arial, sans-serif;
|
| padding: 20px;
|
| max-width: 600px;
|
| margin: auto;
|
| }
|
| .question {
|
| margin-bottom: 20px;
|
| }
|
| button {
|
| padding: 10px 15px;
|
| font-size: 16px;
|
| }
|
| .result {
|
| margin-top: 20px;
|
| font-weight: bold;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <h1>Austria Quiz</h1>
|
|
|
| <form id="quizForm">
|
| <div class="question">
|
| <p>1. What is the capital city of Austria?</p>
|
| <label><input type="radio" name="q1" value="A"> A) Salzburg</label><br>
|
| <label><input type="radio" name="q1" value="B"> B) Graz</label><br>
|
| <label><input type="radio" name="q1" value="C"> C) Vienna</label><br>
|
| <label><input type="radio" name="q1" value="D"> D) Innsbruck</label>
|
| </div>
|
|
|
| <div class="question">
|
| <p>2. Which mountain range runs through Austria?</p>
|
| <label><input type="radio" name="q2" value="A"> A) Rocky Mountains</label><br>
|
| <label><input type="radio" name="q2" value="B"> B) Andes</label><br>
|
| <label><input type="radio" name="q2" value="C"> C) Alps</label><br>
|
| <label><input type="radio" name="q2" value="D"> D) Himalayas</label>
|
| </div>
|
|
|
| <div class="question">
|
| <p>3. What is the official language of Austria?</p>
|
| <label><input type="radio" name="q3" value="A"> A) French</label><br>
|
| <label><input type="radio" name="q3" value="B"> B) German</label><br>
|
| <label><input type="radio" name="q3" value="C"> C) Italian</label><br>
|
| <label><input type="radio" name="q3" value="D"> D) English</label>
|
| </div>
|
|
|
| <button type="button" onclick="checkAnswers()">Submit</button>
|
| <div class="result" id="result"></div>
|
| </form>
|
|
|
| <script>
|
| function checkAnswers() {
|
| const answers = {
|
| q1: 'C',
|
| q2: 'C',
|
| q3: 'B'
|
| };
|
|
|
| let score = 0;
|
| for (let q in answers) {
|
| const selected = document.querySelector(`input[name="${q}"]:checked`);
|
| if (selected && selected.value === answers[q]) {
|
| score++;
|
| }
|
| }
|
|
|
| document.getElementById('result').textContent = `You got ${score} out of 3 correct!`;
|
| }
|
| </script>
|
| </body>
|
| </html>
|
|
|
| |
| |
Comments