Scribd
Upload
4 views3 pages

Chinese Quiz - HTML

The document is an HTML page for a Chinese Counting Quiz that tests users on numbers 0-99 in Chinese. It includes a series of questions with multiple-choice answers and provides feedback on the user's selections. The quiz is designed to be interactive, with JavaScript handling the loading of questions and checking answers.

Uploaded by

Ayeaha Saddiqa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views3 pages

Chinese Quiz - HTML

The document is an HTML page for a Chinese Counting Quiz that tests users on numbers 0-99 in Chinese. It includes a series of questions with multiple-choice answers and provides feedback on the user's selections. The quiz is designed to be interactive, with JavaScript handling the loading of questions and checking answers.

Uploaded by

Ayeaha Saddiqa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chinese Counting Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
padding: 20px;
}

h1 {
text-align: center;
}

.question {
margin-bottom: 15px;
}

.feedback {
color: red;
font-weight: bold;
display: none;
}

.correct {
color: green;
font-weight: bold;
}

button {
margin-top: 10px;
}
</style>
</head>

<body>
<h1>Chinese Counting Quiz (0-99)</h1>
<div id="quiz"></div>
<button onclick="checkAnswers()">Submit Answers</button>
<script>
const questions = [
{ question: "What is 0 in Chinese?", options: ["零 (líng)", "一 (yī)", "十 (shí)", "百 (bǎi)"],
answer: 0 },
{ question: "How do you write 1 in Chinese?", options: ["二 (èr)", "一 (yī)", "三 (sān)", "四
(sì)"], answer: 1 },
{ question: "What is 2 in Chinese?", options: ["一 (yī)", "二 (èr)", "三 (sān)", "四 (sì)"], answer:
1 },
{ question: "What is 3 in Chinese?", options: ["三 (sān)", "四 (sì)", "五 (wǔ)", "六 (liù)"],
answer: 0 },
{ question: "How do you write 10 in Chinese?", options: ["十 (shí)", "九 (jiǔ)", "八 (bā)", "七
(qī)"], answer: 0 },
{ question: "What is 99 in Chinese?", options: ["九十九 (jiǔ shí jiǔ)", "九十八 (jiǔ shí bā)", "九
十七 (jiǔ shí qī)", "九十六 (jiǔ shí liù)"], answer: 0 },
{ question: "What is 100 in Chinese?", options: ["一百 (yī bǎi)", "一千 (yī qiān)", "十 (shí)", "九
十 (jiǔ shí)"], answer: 0 }
];

const quizContainer = document.getElementById("quiz");

function loadQuiz() {
questions.forEach((q, index) => {
const questionHTML = `
<div class="question">
<p>${index + 1}. ${q.question}</p>
${q.options.map((option, i) =>
`<label>
<input type="radio" name="q${index}" value="${i}"> ${option}
</label><br>`).join('')}
<p class="feedback" id="feedback-${index}">Wrong answer! Try again.</p>
</div>
`;
quizContainer.innerHTML += questionHTML;
});
}

function checkAnswers() {
questions.forEach((q, index) => {
const selectedOption = document.querySelector(`input[name="q${index}"]:checked`);
const feedbackElement = document.getElementById(`feedback-${index}`);
if (selectedOption) {
const answerIndex = parseInt(selectedOption.value);
if (answerIndex === q.answer) {
feedbackElement.style.display = 'none';
selectedOption.parentElement.style.color = 'green';
} else {
feedbackElement.style.display = 'block';
}
} else {
feedbackElement.style.display = 'block';
}
});
}

window.onload = loadQuiz;
</script>
</body>

</html>

You might also like