let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.body.appendChild(tag);
let player;
let score = 0;
let currentQuestion = 0;
let intervalID;
const questions = [
{
time: 72,
text: "What's the correct order to start cleaning?",
options: [
"A: Vacuum, remove all items, and check walls and floor.",
"B: Moisten everything, remove items, and vacuum.",
"C: Check, vacuum, and remove all items."
],
correct: 2
},
{
time: 132,
text: "The bathroom cleaner is used with:",
options: [
"A: The pink microfiber cloth.",
"B: Only with the large sponge.",
"C: With both sponges."
],
correct: 1
},
{
time: 159,
text: "When should we use the red brush?",
options: [
"A: When we don't have anything else.",
"B: To clean tile grout, doors, and faucets.",
"C: Only on the floor."
],
correct: 1
},
{
time: 214,
text: "What do we use ECA water for?",
options: [
"A: To prevent growth and eliminate mold and bacteria.",
"B: To make it smell good.",
"C: To prevent residue from sticking to the wall."
],
correct: 0
}
];
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '100%',
videoId: '4hNnGvGgaMU',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.PLAYING && !intervalID) {
intervalID = setInterval(checkTime, 500);
} else if (event.data !== YT.PlayerState.PLAYING && intervalID) {
clearInterval(intervalID);
intervalID = null;
}
}
function checkTime() {
if (player && player.getCurrentTime) {
const currentTime = Math.floor(player.getCurrentTime());
if (currentQuestion {
const btn = document.createElement('button');
btn.innerText = opt;
btn.style.display = 'block';
btn.style.margin = '10px 0';
btn.style.padding = '10px';
btn.style.width = '100%';
btn.style.border = '1px solid #ccc';
btn.style.borderRadius = '5px';
btn.style.cursor = 'pointer';
btn.onclick = () => {
if (index === q.correct) {
document.getElementById('question-box').style.display = 'none';
score++;
document.getElementById('score').innerText = score;
document.getElementById('progress-bar').style.width = (score / questions.length * 100) + '%';
currentQuestion++;
player.playVideo();
} else {
document.getElementById('feedback').innerText = "❌ Incorrect. Try again!";
}
};
answersDiv.appendChild(btn);
});
}
