Spaces:
Sleeping
Sleeping
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>クイズ</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0; } | |
| .container { max-width: 600px; margin: 50px auto; background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } | |
| h1 { text-align: center; color: #333; } | |
| p { margin-bottom: 20px; } | |
| label { display: block; margin-bottom: 10px; } | |
| input[type="number"] { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; } | |
| .btn { display: block; width: 100%; padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } | |
| .btn:hover { background-color: #0056b3; } | |
| </style> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function() { | |
| // Define translations | |
| const translations = { | |
| "en": { | |
| "title": "Quiz", | |
| "question": "What is this element?:", | |
| "label": "Enter the atomic number:", | |
| "submit": "Check Answer", | |
| "next": "Next Question" | |
| }, | |
| "ja": { | |
| "title": "クイズ", | |
| "question": "その元素は何でしょう？:", | |
| "label": "原子番号を入力してください:", | |
| "submit": "答え合わせ", | |
| "next": "次の問題" | |
| } | |
| }; | |
| // Get user's language | |
| const userLang = navigator.language || navigator.userLanguage; | |
| const lang = userLang.startsWith("ja") ? "ja" : "en"; // Default to English if not Japanese | |
| // Apply translations | |
| document.querySelector('title').textContent = translations[lang].title; | |
| document.querySelector('h1').textContent = translations[lang].title; | |
| document.querySelector('#question').textContent = translations[lang].question; | |
| document.querySelector('label[for="user_input"]').textContent = translations[lang].label; | |
| document.querySelector('button[type="submit"]').textContent = translations[lang].submit; | |
| document.querySelector('form[action="/next"] button').textContent = translations[lang].next; | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1></h1> | |
| <p id="question"<strong>{{ element }}</strong>></p><p><strong>{{ element }}</strong></p> | |
| <form action="/" method="post"> | |
| <label for="user_input"></label> | |
| <input type="number" id="user_input" name="user_input" required> | |
| <button type="submit" class="btn"></button> | |
| </form> | |
| {% if result %} | |
| <p>{{ result }}</p> | |
| {% endif %} | |
| <form action="/next" method="post"> | |
| <button type="submit" class="btn"></button> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |