Sight Translation Quiz | Hantavirus, Film, Nauru Rename
by RocketGecko40565 lines24.6 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sight Translation Quiz | Hantavirus, Film, Nauru Rename</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #f0f7fc;
padding: 30px 20px;
color: #1a3a4f;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 2.2rem;
text-align: center;
color: #0c4e6e;
margin-bottom: 8px;
}
.sub {
text-align: center;
color: #2c7aa0;
margin-bottom: 30px;
border-bottom: 2px solid #bddcec;
padding-bottom: 15px;
}
.quiz-section {
background: white;
border-radius: 24px;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
margin-bottom: 40px;
padding: 24px 28px;
}
.section-title {
font-size: 1.7rem;
font-weight: 600;
margin-bottom: 20px;
padding-left: 12px;
border-left: 6px solid #3a8bbb;
color: #1a5a7a;
}
.question-item {
margin-bottom: 28px;
background: #fefefe;
padding: 12px 16px;
border-radius: 20px;
border: 1px solid #d4e6f0;
}
.question-text {
font-weight: 600;
font-size: 1.05rem;
margin-bottom: 12px;
color: #0c4e6e;
}
.options {
margin-left: 20px;
margin-bottom: 12px;
}
.options label {
display: block;
margin: 6px 0;
cursor: pointer;
}
button {
background: #3a8bbb;
border: none;
color: white;
padding: 8px 18px;
border-radius: 40px;
font-size: 0.9rem;
cursor: pointer;
margin-top: 8px;
margin-right: 12px;
transition: 0.2s;
}
button:hover {
background: #2a6e8f;
}
.feedback {
margin-top: 10px;
padding: 8px 12px;
border-radius: 14px;
font-size: 0.9rem;
}
.correct-fb {
background: #dcfce7;
color: #15803d;
border-left: 4px solid #22c55e;
}
.wrong-fb {
background: #ffe4e2;
color: #b91c1c;
border-left: 4px solid #ef4444;
}
.matching-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 20px 0;
}
.matching-col {
flex: 1;
min-width: 220px;
background: #f9fbfd;
padding: 16px;
border-radius: 20px;
}
.match-item {
background: white;
margin: 10px 0;
padding: 10px 12px;
border-radius: 40px;
border: 1px solid #c0d8e8;
cursor: pointer;
transition: 0.1s;
text-align: center;
}
.match-item.selected {
background: #3a8bbb;
color: white;
border-color: #3a8bbb;
}
hr {
margin: 20px 0;
border: 0;
height: 1px;
background: #c0d8e8;
}
.truefalse-buttons {
display: flex;
gap: 12px;
margin: 8px 0;
}
.tf-btn {
background: #e2e8f0;
color: #1e293b;
padding: 4px 20px;
}
.tf-btn.active-true {
background: #15803d;
color: white;
}
.tf-btn.active-false {
background: #b91c1c;
color: white;
}
input[type="text"], textarea {
width: 100%;
padding: 10px;
border-radius: 16px;
border: 1px solid #c0d8e8;
font-family: inherit;
margin-top: 8px;
}
.short-answer-area {
margin: 12px 0;
}
.score-area {
text-align: center;
margin: 20px 0;
}
footer {
text-align: center;
margin-top: 20px;
color: #5b8aa5;
}
.reset-btn {
background: #6c757d;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>๐ณ๏ธ๐ฌ๐ Sight Translation Monitor</h1>
<div class="sub">Based on: Hantavirus Outbreak ยท "Dear You" Film ยท Nauru Name Change</div>
<!-- SECTION 1: Multiple Choice -->
<div class="quiz-section">
<div class="section-title">โ
A. Multiple Choice</div>
<div id="mc-area"></div>
</div>
<!-- SECTION 2: Matching (Vocabulary & Key Facts) -->
<div class="quiz-section">
<div class="section-title">๐ B. Matching Exercise</div>
<p style="margin-bottom: 12px;"><strong>Match each term on the left with the correct description on the right.</strong> Click one from left, then one from right.</p>
<div id="matching-container"></div>
<button id="check-matching">Check Matching</button>
<button id="reset-matching" class="reset-btn">Reset Matching</button>
<div id="matching-feedback" class="feedback" style="margin-top: 12px;"></div>
</div>
<!-- SECTION 3: True or False -->
<div class="quiz-section">
<div class="section-title">๐ C. True or False</div>
<div id="tf-area"></div>
<button id="check-tf">Submit True/False</button>
<div id="tf-feedback" class="feedback"></div>
</div>
<!-- SECTION 4: Fill in the Blanks -->
<div class="quiz-section">
<div class="section-title">โ๏ธ D. Fill in the Blanks</div>
<div id="fill-area"></div>
<button id="check-fill">Check Fill-in</button>
<div id="fill-feedback" class="feedback"></div>
</div>
<!-- SECTION 5: Short Answer Questions -->
<div class="quiz-section">
<div class="section-title">๐ E. Short Answer Questions</div>
<div id="short-area"></div>
<button id="check-short">Show Suggested Answers</button>
<div id="short-feedback" class="feedback"></div>
</div>
<div class="score-area">
<p>โญ Use these exercises to test your comprehension of the sight translation materials โญ</p>
</div>
<footer>Designed for English major interpretation training | Sources: The Scientist, Xinhua, CGTN</footer>
</div>
<script>
// ---------- MULTIPLE CHOICE DATA ----------
const mcqs = [
{
text: "1. Which cruise ship experienced a hantavirus outbreak in early April?",
options: ["MV Atlantic", "MV Hondius", "MV Wonderland", "MV Polar Star"],
correct: 1,
explanation: "The article states: 'the MV Hondius cruise ship sailed off the Argentinian Tierra del Fuego region...'"
},
{
text: "2. How many confirmed hantavirus infections were reported on the cruise ship as of May 12?",
options: ["3", "11", "9", "2"],
correct: 2,
explanation: "The article says: '11 cases... with nine confirmed as hantavirus infections by testing; the other two are suspected cases.'"
},
{
text: "3. What is the original name of the film 'Dear You' in Chinese (as translated)?",
options: ["To Grandma", "Love Letter to Grandma", "Dear Grandma", "Letter to A-ma"],
correct: 1,
explanation: "The Chinese title 'ใ็ป้ฟๅฌท็ๆ
ไนฆใ' translates to 'Love Letter to Grandma' or similar. 'A-ma' means grandmother in Teochew dialect."
},
{
text: "4. What is the proposed new name for the country Nauru?",
options: ["Nauro", "Naoero", "Naurua", "Naouru"],
correct: 1,
explanation: "The parliament passed a constitutional amendment seeking to change name from 'Nauru' to 'Naoero'."
},
{
text: "5. According to Manuel Schibler, how does hantavirus compare to SARS-CoV-2 in terms of transmission?",
options: ["It is more contagious", "It is equally contagious", "It is much less fit for human-to-human transmission", "It spreads only through water"],
correct: 2,
explanation: "Schibler said: 'This virus is much less fit to be transmitted from one human being to another than was, or still is, SARS-CoV-2.'"
}
];
// ---------- MATCHING DATA ----------
const leftMatch = [
"Hantavirus",
"MV Hondius",
"Dear You (film)",
"Naoero",
"Word-of-mouth",
"Teochew dialect"
];
const rightMatch = [
"The proposed new name for Nauru",
"A low-budget Chaoshan-dialect film that became a cinematic surprise",
"A virus causing severe respiratory illness, transmitted by rodents",
"The cruise ship where the outbreak occurred",
"The language used in the film 'Dear You'",
"The key factor driving steady box office growth for 'Dear You'"
];
// Correct pairs: left[0]->right[2], left[1]->right[3], left[2]->right[1], left[3]->right[0], left[4]->right[5], left[5]->right[4]
const correctPairs = [2, 3, 1, 0, 5, 4];
// ---------- TRUE/FALSE DATA ----------
const tfStatements = [
{ text: "The hantavirus outbreak on the cruise ship resulted in 3 deaths among approximately 150 people on board.", answer: true, explanation: "The article states: 'which claimed the lives of three of the nearly 150 people onboard.'" },
{ text: "From 1993 to 2023, the US reported over 5,000 cases of hantavirus disease according to the CDC.", answer: false, explanation: "The CDC reported 890 cases of hantavirus disease from 1993 to 2023." },
{ text: "The film 'Dear You' received a Douban rating of 9.0 which later rose to 9.1, making it the highest-rated domestic release of 2026 so far.", answer: true, explanation: "The article confirms: 'opening rating of 9.0... later rose to 9.1, making it the highest-rated domestic release so far this year.'" },
{ text: "Nauru's name change proposal will become official immediately after parliamentary approval without any further steps.", answer: false, explanation: "The next step is to hold a national referendum before the name change takes effect." },
{ text: "The name 'Nauru' emerged because foreign tongues could not properly pronounce 'Naoero'.", answer: true, explanation: "The government explained that 'Nauru' emerged because 'Naoero' could not be properly pronounced by foreign tongues." }
];
// ---------- FILL IN THE BLANKS ----------
const fillBlanks = [
{ text: "The hantavirus outbreak occurred on the MV Hondius cruise ship which was sailing from Argentina's Tierra del Fuego region to ______ on the coast of West Africa.", correct: "Cape Verde", hint: "Destination mentioned in first paragraph" },
{ text: "According to the CDC, from 1993 to 2023, the United States reported ______ cases of hantavirus disease.", correct: "890", hint: "Three-digit number" },
{ text: "The film 'Dear You' had total box office revenue exceeding ______ million yuan by May 12.", correct: "170", hint: "Number before 'million yuan'" },
{ text: "Nauru's name change proposal was first put forward by President David Adeang in ______ (month).", correct: "January", hint: "Month when proposal was introduced" }
];
// ---------- SHORT ANSWER QUESTIONS ----------
const shortQuestions = [
{ q: "Why are people more afraid of hantavirus given the recent COVID-19 pandemic, according to Dr. Manuel Schibler? What reassurance does he provide?", sample: "People are more afraid because hantavirus causes lung disease, similar to COVID-19. However, Schibler reassures that hantavirus is much less fit for human-to-human transmission than SARS-CoV-2, making it less likely to cause a widespread outbreak." },
{ q: "What factors contributed to the box office success of 'Dear You' despite its low-budget and first-time cast? Provide at least two factors mentioned in the article.", sample: "Two key factors: 1) Soaring word-of-mouth publicity that drove steady traction; 2) A high Douban rating (9.0 rising to 9.1) that attracted more viewers. The film's emotional appeal as a 'tear-jerker' also helped." },
{ q: "Explain the rationale behind Nauru's proposal to change its name from 'Nauru' to 'Naoero'. What does the government say about the new name?", sample: "The government states that 'Naoero' better reflects the nation's heritage, language and identity. The current name 'Nauru' emerged because foreign tongues could not properly pronounce 'Naoero'. The change aims to restore the authentic local pronunciation and representation." }
];
// ------------------- RENDER FUNCTIONS -------------------
function renderMultipleChoice() {
const container = document.getElementById("mc-area");
let html = "";
mcqs.forEach((mc, idx) => {
html += `<div class="question-item" data-mc-idx="${idx}">
<div class="question-text">${mc.text}</div>
<div class="options">`;
mc.options.forEach((opt, optIdx) => {
html += `<label><input type="radio" name="mc_${idx}" value="${optIdx}"> ${opt}</label>`;
});
html += `</div><button class="check-mc-btn" data-idx="${idx}">Check Answer</button>
<div class="feedback" id="mc-fb-${idx}"></div></div>`;
});
container.innerHTML = html;
document.querySelectorAll(".check-mc-btn").forEach(btn => {
btn.addEventListener("click", (e) => {
const idx = parseInt(btn.getAttribute("data-idx"));
const radios = document.getElementsByName(`mc_${idx}`);
let selected = null;
for(let r of radios) if(r.checked) { selected = parseInt(r.value); break; }
const fbDiv = document.getElementById(`mc-fb-${idx}`);
if(selected === null) {
fbDiv.innerHTML = `<div class="feedback wrong-fb">โ ๏ธ Please select an answer.</div>`;
} else if(selected === mcqs[idx].correct) {
fbDiv.innerHTML = `<div class="feedback correct-fb">โ Correct! ${mcqs[idx].explanation}</div>`;
} else {
fbDiv.innerHTML = `<div class="feedback wrong-fb">โ Incorrect. ${mcqs[idx].explanation}</div>`;
}
});
});
}
// Matching state
let selectedLeft = null;
let matchStatus = new Array(leftMatch.length).fill(null);
function renderMatching() {
let html = `<div class="matching-row">
<div class="matching-col"><h4>๐ Terms / Names</h4>`;
leftMatch.forEach((item, i) => {
let matchedText = (matchStatus[i] !== null) ? ` โ โ
"${rightMatch[matchStatus[i]].substring(0, 40)}..."` : "";
html += `<div class="match-item" data-left-idx="${i}">${item} ${matchedText ? `<span style="font-size:0.7rem;">โ๏ธ</span>` : ''}</div>`;
});
html += `</div><div class="matching-col"><h4>๐ Descriptions</h4>`;
rightMatch.forEach((item, i) => {
let isUsed = matchStatus.includes(i);
html += `<div class="match-item" data-right-idx="${i}" style="${isUsed ? 'opacity:0.6; background:#eef2f5;' : ''}">${item}</div>`;
});
html += `</div></div>`;
document.getElementById("matching-container").innerHTML = html;
// attach events
document.querySelectorAll("[data-left-idx]").forEach(el => {
el.addEventListener("click", () => {
const idx = parseInt(el.getAttribute("data-left-idx"));
if(matchStatus[idx] !== null) {
alert("This term is already matched. Use 'Reset Matching' if you want to change.");
return;
}
selectedLeft = idx;
document.querySelectorAll("[data-left-idx]").forEach(l => l.classList.remove("selected"));
el.classList.add("selected");
});
});
document.querySelectorAll("[data-right-idx]").forEach(el => {
el.addEventListener("click", () => {
if(selectedLeft === null) { alert("First click a term on the left."); return; }
const rightIdx = parseInt(el.getAttribute("data-right-idx"));
if(matchStatus.includes(rightIdx)) { alert("This description is already matched to another term."); return; }
matchStatus[selectedLeft] = rightIdx;
selectedLeft = null;
renderMatching();
});
});
}
document.getElementById("check-matching").addEventListener("click", () => {
let allCorrect = true;
let correctCount = 0;
for(let i=0; i<matchStatus.length; i++) {
if(matchStatus[i] === correctPairs[i]) correctCount++;
else if(matchStatus[i] !== null) allCorrect = false;
}
const fbDiv = document.getElementById("matching-feedback");
if(correctCount === leftMatch.length && matchStatus.every(v => v !== null)) {
fbDiv.innerHTML = `<div class="feedback correct-fb">๐ Perfect! All ${leftMatch.length} matches are correct.</div>`;
} else {
fbDiv.innerHTML = `<div class="feedback wrong-fb">You matched ${correctCount}/${leftMatch.length} correctly.
<br><strong>Correct pairs:</strong><br>
โข Hantavirus โ A virus causing severe respiratory illness<br>
โข MV Hondius โ The cruise ship where the outbreak occurred<br>
โข Dear You โ A low-budget Chaoshan-dialect film<br>
โข Naoero โ The proposed new name for Nauru<br>
โข Word-of-mouth โ Key factor driving box office growth<br>
โข Teochew dialect โ The language used in the film</div>`;
}
});
document.getElementById("reset-matching").addEventListener("click", () => {
matchStatus = new Array(leftMatch.length).fill(null);
selectedLeft = null;
renderMatching();
document.getElementById("matching-feedback").innerHTML = "";
});
// True/False rendering
let tfSelections = new Array(tfStatements.length).fill(null);
function renderTrueFalse() {
let html = "";
tfStatements.forEach((st, idx) => {
html += `<div class="question-item">
<div class="question-text">${idx+1}. ${st.text}</div>
<div class="truefalse-buttons">
<button class="tf-btn tf-true" data-tf-idx="${idx}" data-val="true">True</button>
<button class="tf-btn tf-false" data-tf-idx="${idx}" data-val="false">False</button>
</div>
<div id="tf-indicator-${idx}" class="feedback" style="min-height:30px;"></div>
</div>`;
});
document.getElementById("tf-area").innerHTML = html;
document.querySelectorAll(".tf-true, .tf-false").forEach(btn => {
btn.addEventListener("click", (e) => {
const idx = parseInt(btn.getAttribute("data-tf-idx"));
const val = btn.getAttribute("data-val") === "true";
tfSelections[idx] = val;
const parent = btn.parentElement;
parent.querySelectorAll(".tf-btn").forEach(b => b.classList.remove("active-true","active-false"));
if(val) btn.classList.add("active-true");
else btn.classList.add("active-false");
document.getElementById(`tf-indicator-${idx}`).innerHTML = "";
});
});
}
document.getElementById("check-tf").addEventListener("click", () => {
let score = 0;
tfStatements.forEach((st, idx) => {
const indicator = document.getElementById(`tf-indicator-${idx}`);
if(tfSelections[idx] === null) {
indicator.innerHTML = `<span class="wrong-fb">โ ๏ธ Not answered.</span>`;
} else if(tfSelections[idx] === st.answer) {
score++;
indicator.innerHTML = `<span class="correct-fb">โ Correct. ${st.explanation}</span>`;
} else {
indicator.innerHTML = `<span class="wrong-fb">โ Wrong. ${st.explanation}</span>`;
}
});
const fbDiv = document.getElementById("tf-feedback");
fbDiv.innerHTML = `<div class="feedback">๐ You got ${score}/${tfStatements.length} correct.</div>`;
});
// Fill in blanks
function renderFillBlanks() {
let html = "";
fillBlanks.forEach((item, idx) => {
html += `<div class="question-item">
<div class="question-text">${idx+1}. ${item.text}</div>
<input type="text" id="fill-input-${idx}" placeholder="Type your answer">
<div id="fill-fb-${idx}" class="feedback" style="margin-top:6px;"></div>
</div>`;
});
document.getElementById("fill-area").innerHTML = html;
}
document.getElementById("check-fill").addEventListener("click", () => {
let correctCount = 0;
fillBlanks.forEach((item, idx) => {
const userAns = document.getElementById(`fill-input-${idx}`).value.trim().toLowerCase();
const correctAns = item.correct.toLowerCase();
const fbDiv = document.getElementById(`fill-fb-${idx}`);
if(userAns === correctAns || (item.correct === "Cape Verde" && userAns.includes("cape")) ||
(item.correct === "890" && userAns === "890") ||
(item.correct === "170" && userAns === "170") ||
(item.correct === "January" && userAns.includes("jan"))) {
fbDiv.innerHTML = `<span class="correct-fb">โ Correct!</span>`;
correctCount++;
} else {
fbDiv.innerHTML = `<span class="wrong-fb">โ Incorrect. Correct answer: ${item.correct}. Hint: ${item.hint}</span>`;
}
});
document.getElementById("fill-feedback").innerHTML = `<div class="feedback">๐ Fill-in score: ${correctCount}/${fillBlanks.length}</div>`;
});
// Short answer
function renderShort() {
let html = "";
shortQuestions.forEach((sq, idx) => {
html += `<div class="question-item">
<div class="question-text">${idx+1}. ${sq.q}</div>
<textarea rows="3" placeholder="Write your answer here (interpretation and synthesis)" id="short-${idx}"></textarea>
<div id="short-sample-${idx}" class="feedback" style="display:none;"></div>
</div>`;
});
document.getElementById("short-area").innerHTML = html;
}
document.getElementById("check-short").addEventListener("click", () => {
shortQuestions.forEach((sq, idx) => {
const sampleDiv = document.getElementById(`short-sample-${idx}`);
sampleDiv.style.display = "block";
sampleDiv.innerHTML = `<strong>๐ Suggested key points for reference:</strong><br> ${sq.sample}`;
sampleDiv.style.background = "#e8f4fd";
sampleDiv.style.padding = "10px";
sampleDiv.style.borderRadius = "14px";
sampleDiv.style.marginTop = "10px";
});
document.getElementById("short-feedback").innerHTML = `<div class="feedback correct-fb">โ
Compare your answers with the suggested points. Self-assess for completeness and accuracy.</div>`;
});
// Initialize all
function init() {
renderMultipleChoice();
renderMatching();
renderTrueFalse();
renderFillBlanks();
renderShort();
}
init();
</script>
</body>
</html>Game Source: Sight Translation Quiz | Hantavirus, Film, Nauru Rename
Creator: RocketGecko40
Libraries: none
Complexity: complex (565 lines, 24.6 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: sight-translation-quiz-hantavirus-film-n-rocketgecko40" to link back to the original. Then publish at arcadelab.ai/publish.