| |
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8" />
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
| <title>Getting Older Quiz</title>
|
| <style>
|
| body {
|
| font-family: "Helvetica Neue", sans-serif;
|
| background-color: #f7f9fa;
|
| padding: 20px;
|
| color: #333;
|
| }
|
| .quiz-wrapper {
|
| max-width: 750px;
|
| margin: auto;
|
| background-color: #ffffff;
|
| padding: 30px;
|
| border-radius: 12px;
|
| box-shadow: 0 4px 10px rgba(0,0,0,0.08);
|
| }
|
| h1 {
|
| text-align: center;
|
| color: #2c3e50;
|
| }
|
| .question-block {
|
| margin-bottom: 25px;
|
| }
|
| .question-block h3 {
|
| font-size: 18px;
|
| margin-bottom: 10px;
|
| }
|
| label {
|
| display: block;
|
| margin-bottom: 6px;
|
| cursor: pointer;
|
| }
|
| button {
|
| background-color: #2ecc71;
|
| color: #fff;
|
| border: none;
|
| padding: 12px 20px;
|
| font-size: 16px;
|
| border-radius: 6px;
|
| cursor: pointer;
|
| margin-top: 20px;
|
| }
|
| .result {
|
| margin-top: 25px;
|
| font-size: 18px;
|
| font-weight: bold;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="quiz-wrapper">
|
| <form id="quizForm">
|
|
|
| </form>
|
| <button onclick="submitQuiz()">Submit Quiz</button>
|
| <div class="result" id="quizResult"></div>
|
| </div>
|
|
|
| <script>
|
| const questions = [
|
| {
|
| q: "1. What is one common physical change as people age?",
|
| options: ["Hair gets thicker", "Height increases", "Bones become stronger", "People may lose a small amount of height"],
|
| answer: 3
|
| },
|
| {
|
| q: "2. Which of the following is a *normal* part of aging?",
|
| options: ["Complete memory loss", "Slight forgetfulness or slower recall", "Loss of all mobility", "Total loss of hearing"],
|
| answer: 1
|
| },
|
| {
|
| q: "3. What is sarcopenia?",
|
| options: ["A fear of growing older", "Muscle loss associated with aging", "A skin condition", "A type of arthritis"],
|
| answer: 1
|
| },
|
| {
|
| q: "4. Which vitamin becomes harder to absorb with age?",
|
| options: ["Vitamin C", "Vitamin D", "Vitamin B12", "Vitamin A"],
|
| answer: 2
|
| },
|
| {
|
| q: "5. What can help reduce the risk of cognitive decline in older adults?",
|
| options: ["Avoiding social interaction", "Multitasking constantly", "Regular physical and mental activity", "Eating only meat"],
|
| answer: 2
|
| },
|
| {
|
| q: "6. Which lifestyle habit has the biggest impact on healthy aging?",
|
| options: ["Skipping breakfast", "Staying socially connected", "Avoiding all technology", "Watching more TV"],
|
| answer: 1
|
| },
|
| {
|
| q: "7. How does metabolism typically change with age?",
|
| options: ["It gets faster", "It stays the same", "It slows down", "It only changes if you gain weight"],
|
| answer: 2
|
| },
|
| {
|
| q: "8. True or False: Aging always causes serious mental decline.",
|
| options: ["True", "False"],
|
| answer: 1
|
| },
|
| {
|
| q: "9. What age is commonly used to define someone as a “senior citizen”?",
|
| options: ["50", "60", "65", "75"],
|
| answer: 2
|
| },
|
| {
|
| q: "10. Which activity is especially helpful for balance and fall prevention in older adults?",
|
| options: ["Weightlifting", "Kickboxing", "Tai Chi", "CrossFit"],
|
| answer: 2
|
| }
|
| ];
|
|
|
| const form = document.getElementById("quizForm");
|
|
|
| questions.forEach((q, index) => {
|
| const block = document.createElement("div");
|
| block.className = "question-block";
|
| const questionHTML = `<h3>${q.q}</h3>`;
|
| const optionsHTML = q.options.map((opt, i) => `
|
| <label>
|
| <input type="radio" name="q${index}" value="${i}" required>
|
| ${opt}
|
| </label>
|
| `).join("");
|
| block.innerHTML = questionHTML + optionsHTML;
|
| form.appendChild(block);
|
| });
|
|
|
| function submitQuiz() {
|
| let score = 0;
|
| questions.forEach((q, i) => {
|
| const selected = document.querySelector(`input[name="q${i}"]:checked`);
|
| if (selected && parseInt(selected.value) === q.answer) {
|
| score++;
|
| }
|
| });
|
|
|
| const resultText = score >= 8
|
| ? `🎉 You got ${score}/10 – Aging expert in the making!`
|
| : score >= 5
|
| ? `👍 You got ${score}/10 – Solid knowledge. Keep learning!`
|
| : `🧩 You got ${score}/10 – Aging is a journey, and now you’re on it.`;
|
|
|
| document.getElementById("quizResult").textContent = resultText;
|
| }
|
| </script>
|
| </body>
|
| </html>
|
|
|
| |
| |
Comments