| |
| <!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">
|
| <h1>🧠 Healthy Food Quiz for Older Adults </h1>
|
| <form id="quizForm">
|
|
|
| </form>
|
| <button onclick="submitQuiz()">Submit Quiz</button>
|
| <div class="result" id="quizResult"></div>
|
| </div>
|
|
|
| <script>
|
| const questions = [
|
| {
|
| q: "1. Which of the following is a heart-healthy protein option for older adults?",
|
| options: ["Fatty cuts of red meat", "Grilled skinless chicken breast", "Processed deli meats", "Fried fish"],
|
| answer: 1
|
| },
|
| {
|
| q: "2. Calcium is important for aging bones. Which food is a good source of calcium and low in fat?",
|
| options: ["Whole milk", "Low-fat yogurt", "Whipped cream", "Ice cream"],
|
| answer: 1
|
| },
|
| {
|
| q: "3. Which type of fiber-rich food helps manage both weight and blood sugar levels?",
|
| options: ["White rice", "Canned fruit in syrup", "Oatmeal", "White bread"],
|
| answer: 2
|
| },
|
| {
|
| q: "4. What is a smart way for older adults to manage portion sizes?",
|
| options: ["Skipping breakfast", "Eating from large serving bowls", "Using smaller plates", "Eating one large meal a day "],
|
| answer: 2
|
| },
|
| {
|
| q: "5. Which beverage supports hydration without adding empty calories?",
|
| options: ["Water", "Sweet tea", "Regular soda", "Flavored coffee drinks "],
|
| answer: 0
|
| },
|
| {
|
| q: "6. What type of fat should older adults aim to include in their diets in moderation?",
|
| options: ["Trans fats", "Saturated fats", "Unsaturated fats (like those in nuts and avocados)", "Lard "],
|
| answer: 2
|
| },
|
| {
|
| q: "7. Why is protein especially important for older adults managing their weight?",
|
| options: ["It helps maintain muscle mass", "It makes you tired", "It increases blood pressure", "It should be avoided "],
|
| answer: 0
|
| },
|
| {
|
| q: "8. What is a better snack option for older adults trying to lose weight?",
|
| options: ["Potato chips", "Cookies", "Carrot sticks with hummus", "Candy "],
|
| answer: 2
|
| },
|
| {
|
| q: "9. Which of the following helps control blood sugar and supports digestive health?",
|
| options: ["High-fiber fruits like berries", "Sugar-sweetened drinks", "White bread toast", "Crackers "],
|
| answer: 0
|
| },
|
| {
|
| q: "10. What is one benefit of eating more vegetables for older adults?",
|
| options: ["They are high in fat", "They are expensive and not worth it", "They provide important nutrients without many calories", "They slow metabolism "],
|
| 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