Spaces:
Sleeping
Sleeping
File size: 3,180 Bytes
8b41da9 1e3d5ac 8b41da9 549c0d9 704f6e8 549c0d9 704f6e8 549c0d9 8b41da9 549c0d9 8b41da9 549c0d9 8b41da9 549c0d9 704f6e8 8b41da9 549c0d9 8b41da9 549c0d9 8b41da9 549c0d9 8b41da9 1e3d5ac |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html>
<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> |