Tense Power Flip Challenge

by UltraOwl78
963 lines12.4 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Tense Power Flip Challenge</title>

<style>
*{box-sizing:border-box}

body{
margin:0;
font-family:Arial,sans-serif;
background:linear-gradient(135deg,#10152d,#29205a);
color:white;
min-height:100vh;
padding:20px;
}

.game{
max-width:850px;
margin:auto;
text-align:center;
}

h1{
font-size:38px;
margin:10px 0 5px;
}

.subtitle{
color:#cfd3ff;
margin-bottom:18px;
}

.stats{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
margin-bottom:20px;
}

.stat{
background:#ffffff15;
border:1px solid #ffffff25;
padding:10px 18px;
border-radius:20px;
font-weight:bold;
}

.zone{
font-size:14px;
color:#ddd;
margin-bottom:12px;
}

.board{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
max-width:700px;
margin:auto;
}

.tile{
height:130px;
perspective:800px;
cursor:pointer;
}

.tile-inner{
width:100%;
height:100%;
position:relative;
transition:transform .6s;
transform-style:preserve-3d;
}

.tile.flipped .tile-inner{
transform:rotateY(180deg);
}

.tile-front,
.tile-back{
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
box-shadow:0 8px 20px #0006;
}

.tile-front{
background:linear-gradient(145deg,#6c63ff,#9b5cff);
font-size:45px;
}

.tile-front small{
font-size:14px;
margin-top:5px;
}

.tile-back{
background:white;
color:#20233d;
transform:rotateY(180deg);
font-size:22px;
font-weight:bold;
}

.tile-back small{
font-size:12px;
color:#777;
margin-top:7px;
}

.challenge{
background:#ffffff12;
border:1px solid #ffffff25;
border-radius:22px;
padding:22px;
margin:25px auto;
max-width:700px;
display:none;
}

.question{
font-size:25px;
font-weight:bold;
line-height:1.4;
margin:15px 0;
}

.options{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.option{
border:0;
padding:14px;
border-radius:14px;
font-size:16px;
font-weight:bold;
cursor:pointer;
background:#ffffff;
color:#222;
}

.option:hover{
transform:scale(1.02);
}

.correct{
background:#39d98a!important;
color:white!important;
}

.wrong{
background:#ff5757!important;
color:white!important;
}

.feedback{
font-size:20px;
font-weight:bold;
margin:18px 0 5px;
min-height:25px;
}

.result{
display:none;
background:#ffffff15;
border-radius:25px;
padding:30px;
margin-top:25px;
}

.final-score{
font-size:60px;
font-weight:bold;
color:#ffe45c;
}

button.restart{
border:0;
background:#ffe45c;
color:#222;
font-size:18px;
font-weight:bold;
padding:14px 25px;
border-radius:15px;
cursor:pointer;
}

.done{
opacity:.45;
cursor:default;
}

@media(max-width:600px){
.board{
grid-template-columns:repeat(3,1fr);
gap:9px;
}

.tile{
height:105px;
}

.tile-front{
font-size:35px;
}

.question{
font-size:20px;
}

.options{
grid-template-columns:1fr;
}

h1{
font-size:30px;
}
}
</style>
</head>

<body>

<div class="game">

<h1>🎮 TENSE POWER FLIP</h1>
<div class="subtitle">
Flip the tiles. Beat the challenge. Master the tenses!
</div>

<div class="stats">
<div class="stat">⭐ Score: <span id="score">0</span></div>
<div class="stat">🔥 Streak: <span id="streak">0</span></div>
<div class="stat">🎯 Tiles: <span id="remaining">20</span></div>
</div>

<div class="zone">
⭐⭐⭐⭐⭐ MAIN FOCUS: SIMPLE TENSES
</div>

<div class="board" id="board"></div>

<div class="challenge" id="challenge">

<div id="challengeType"></div>

<div class="question" id="question"></div>

<div class="options" id="options"></div>

<div class="feedback" id="feedback"></div>

</div>

<div class="result" id="result">

<h2>🏆 CHALLENGE COMPLETE!</h2>

<div class="final-score">
<span id="finalScore">0</span>
</div>

<p id="rank"></p>

<p id="resultText"></p>

<button class="restart" onclick="location.reload()">
🔄 PLAY AGAIN
</button>

</div>

</div>


<script>

/* =========================
   SOUND SYSTEM
========================= */

let audioContext;

function sound(type){

try{

if(!audioContext){
audioContext =
new (window.AudioContext ||
window.webkitAudioContext)();
}

let oscillator =
audioContext.createOscillator();

let gain =
audioContext.createGain();

oscillator.connect(gain);
gain.connect(audioContext.destination);

if(type==="flip"){
oscillator.frequency.value=500;
}

if(type==="correct"){
oscillator.frequency.value=800;
}

if(type==="wrong"){
oscillator.frequency.value=180;
}

if(type==="win"){
oscillator.frequency.value=1000;
}

gain.gain.setValueAtTime(
0.08,
audioContext.currentTime
);

gain.gain.exponentialRampToValueAtTime(
0.001,
audioContext.currentTime+0.25
);

oscillator.start();

oscillator.stop(
audioContext.currentTime+0.25
);

}catch(e){}

}


/* =========================
   QUESTION DATABASE
========================= */

const questions=[

/* SIMPLE TENSES
   MAIN FOCUS
*/

{
zone:"SIMPLE TENSE",
type:"🔎 TENSE DETECTIVE",
question:"She goes to school every day. Which tense?",
options:[
"Present Simple",
"Present Continuous",
"Past Simple",
"Present Perfect"
],
answer:0,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🧩 HELPING VERB HUNTER",
question:"___ you like English?",
options:[
"Do",
"Are",
"Have",
"Did"
],
answer:0,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🎯 COMPLETE THE SENTENCE",
question:"Yesterday, Ravi ___ cricket.",
options:[
"plays",
"played",
"will play",
"is playing"
],
answer:1,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🚀 FUTURE CHALLENGE",
question:"Tomorrow, they ___ to Hyderabad.",
options:[
"went",
"go",
"will go",
"have gone"
],
answer:2,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🔎 TENSE DETECTIVE",
question:"My mother cooks dinner every evening.",
options:[
"Past Simple",
"Present Simple",
"Future Simple",
"Present Continuous"
],
answer:1,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🔄 TENSE TRANSFORMER",
question:"Change to Past Simple: I watch TV.",
options:[
"I watched TV.",
"I will watch TV.",
"I am watching TV.",
"I have watched TV."
],
answer:0,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🕵️ ERROR HUNTER",
question:"He ___ not play football.",
options:[
"do",
"does",
"is",
"has"
],
answer:1,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🔄 TENSE TRANSFORMER",
question:"Change to Future Simple: She visits Chennai.",
options:[
"She visited Chennai.",
"She is visiting Chennai.",
"She will visit Chennai.",
"She has visited Chennai."
],
answer:2,
points:15
},

{
zone:"SIMPLE TENSE",
type:"⚡ SPEED CHALLENGE",
question:"Which sentence is Present Simple?",
options:[
"She is reading now.",
"She reads every day.",
"She read yesterday.",
"She will read tomorrow."
],
answer:1,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🧩 HELPING VERB HUNTER",
question:"They ___ football every Sunday.",
options:[
"plays",
"play",
"played",
"will playing"
],
answer:1,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🎯 COMPLETE THE SENTENCE",
question:"Last year, I ___ in Vizag.",
options:[
"live",
"lived",
"will live",
"am living"
],
answer:1,
points:15
},

{
zone:"SIMPLE TENSE",
type:"🚀 FUTURE CHALLENGE",
question:"Next week, she ___ her exam.",
options:[
"writes",
"wrote",
"will write",
"is wrote"
],
answer:2,
points:15
},

/* CONTINUOUS
   MEDIUM FOCUS
*/

{
zone:"CONTINUOUS TENSE",
type:"🔎 TENSE DETECTIVE",
question:"They are studying now. Which tense?",
options:[
"Present Simple",
"Present Continuous",
"Past Continuous",
"Present Perfect"
],
answer:1,
points:10
},

{
zone:"CONTINUOUS TENSE",
type:"🎯 COMPLETE",
question:"At 8 pm yesterday, I ___ dinner.",
options:[
"eat",
"was eating",
"will eat",
"have eaten"
],
answer:1,
points:10
},

{
zone:"CONTINUOUS TENSE",
type:"🚀 FUTURE",
question:"Tomorrow at 5 pm, we ___ cricket.",
options:[
"played",
"are",
"will be playing",
"have played"
],
answer:2,
points:10
},

{
zone:"CONTINUOUS TENSE",
type:"🧩 HELPING VERB",
question:"She ___ reading a book now.",
options:[
"is",
"was",
"has",
"had"
],
answer:0,
points:10
},

/* PERFECT
   LESS FOCUS
*/

{
zone:"PERFECT TENSE",
type:"🔎 TENSE DETECTIVE",
question:"She has finished her work.",
options:[
"Present Simple",
"Present Perfect",
"Past Perfect",
"Present Continuous"
],
answer:1,
points:5
},

{
zone:"PERFECT TENSE",
type:"🧩 HELPING VERB",
question:"They ___ completed the task before lunch.",
options:[
"have",
"had",
"are",
"will be"
],
answer:1,
points:5
},

/* PERFECT CONTINUOUS
   LOWEST FOCUS
*/

{
zone:"PERFECT CONTINUOUS",
type:"🔎 TENSE DETECTIVE",
question:"He has been working for two hours.",
options:[
"Present Continuous",
"Present Perfect",
"Present Perfect Continuous",
"Past Perfect"
],
answer:2,
points:5
},

{
zone:"PERFECT CONTINUOUS",
type:"🔎 TENSE DETECTIVE",
question:"They had been waiting for an hour.",
options:[
"Past Continuous",
"Past Perfect",
"Past Perfect Continuous",
"Future Perfect"
],
answer:2,
points:5
}

];


/* =========================
   GAME VARIABLES
========================= */

let score=0;
let streak=0;
let completed=0;
let currentQuestion=null;
let currentTile=null;


/* =========================
   CREATE FLIP TILES
========================= */

const board =
document.getElementById("board");

questions.forEach((q,index)=>{

let tile=document.createElement("div");

tile.className="tile";

tile.innerHTML=`

<div class="tile-inner">

<div class="tile-front">

🃏

<small>
TILE ${index+1}
</small>

</div>

<div class="tile-back">

✨

<small>
TAP TO PLAY
</small>

</div>

</div>
`;

tile.addEventListener(
"click",
()=>openTile(tile,q,index)
);

board.appendChild(tile);

});


/* =========================
   OPEN TILE
========================= */

function openTile(tile,q,index){

if(tile.classList.contains("done"))
return;

currentQuestion=q;
currentTile=tile;

sound("flip");

tile.classList.add("flipped");

setTimeout(()=>{

document.getElementById(
"challenge"
).style.display="block";

document.getElementById(
"challengeType"
).innerHTML=
"<b>"+q.zone+
"</b><br>"+q.type;

document.getElementById(
"question"
).textContent=q.question;

document.getElementById(
"feedback"
).textContent="";

let options=
document.getElementById("options");

options.innerHTML="";

q.options.forEach(
(option,index)=>{

let button=
document.createElement("button");

button.className="option";

button.textContent=option;

button.onclick=()=>{
checkAnswer(index,button)
};

options.appendChild(button);

});

document.getElementById(
"challenge"
).scrollIntoView({
behavior:"smooth",
block:"center"
});

},350);

}


/* =========================
   CHECK ANSWER
========================= */

function checkAnswer(index,button){

let allButtons=
document.querySelectorAll(".option");

allButtons.forEach(
b=>b.disabled=true
);

let feedback=
document.getElementById("feedback");

if(index===currentQuestion.answer){

button.classList.add("correct");

score+=currentQuestion.points;

streak++;

feedback.innerHTML=
"🎉 CORRECT! +"+
currentQuestion.points+
" POINTS";

sound("correct");

}else{

button.classList.add("wrong");

allButtons[
currentQuestion.answer
].classList.add("correct");

streak=0;

feedback.innerHTML=
"❌ NOT QUITE!<br>Correct answer: "+
currentQuestion.options[
currentQuestion.answer
];

sound("wrong");

}


/* UPDATE SCORE */

document.getElementById(
"score"
).textContent=score;

document.getElementById(
"streak"
).textContent=streak;


/* COMPLETE TILE */

currentTile.classList.add("done");

completed++;

document.getElementById(
"remaining"
).textContent=
questions.length-completed;


/* CLOSE CHALLENGE */

setTimeout(()=>{

document.getElementById(
"challenge"
).style.display="none";

currentTile.classList.remove(
"flipped"
);

if(completed===questions.length){

finishGame();

}

},1200);

}


/* =========================
   FINISH GAME
========================= */

function finishGame(){

document.getElementById(
"board"
).style.display="none";

document.getElementById(
"challenge"
).style.display="none";

let result=
document.getElementById("result");

result.style.display="block";

document.getElementById(
"finalScore"
).textContent=score;

let rank="";
let message="";

if(score>=230){

rank="🏆 TENSE MASTER";

message=
"Excellent! You have a very strong grip on tenses.";

}
else if(score>=190){

rank="💪 STRONG TENSE GRIP";

message=
"Very good! Your tense foundation is strong.";

}
else if(score>=140){

rank="📈 DEVELOPING TENSE GRIP";

message=
"Good progress. Focus more on Simple Tenses.";

}
else{

rank="🎯 BUILD YOUR FOUNDATION";

message=
"Start with Simple Tenses and strengthen your helping verbs.";

}

document.getElementById(
"rank"
).textContent=rank;

document.getElementById(
"resultText"
).textContent=message;

sound("win");

}

</script>

</body>
</html>
Game Source: Tense Power Flip Challenge

Creator: UltraOwl78
Libraries: none
Complexity: complex (963 lines, 12.4 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: tense-power-flip-challenge-ultraowl78" to link back to the original. Then publish at arcadelab.ai/publish.