Keerthi's Tense Magic Quest

by UltraOwl78
937 lines12.7 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keerthi's Tense Magic Quest</title>

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

body{
margin:0;
font-family:Arial,sans-serif;
min-height:100vh;
background:
radial-gradient(circle at 50% 0%,#58358c 0%,#21143d 40%,#090714 100%);
color:white;
padding:18px;
}

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

h1{
font-size:clamp(30px,6vw,48px);
margin:8px 0;
text-shadow:0 0 18px #d9b8ff;
}

.subtitle{
color:#e5d9ff;
font-size:16px;
margin-bottom:20px;
}

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

.stat{
padding:10px 16px;
border-radius:22px;
background:#ffffff14;
border:1px solid #ffffff25;
font-weight:bold;
}

.quest{
background:#ffffff0b;
border:1px solid #ffffff20;
border-radius:28px;
padding:22px;
}

.kingdom{
font-size:22px;
font-weight:bold;
color:#ffd86b;
margin-bottom:18px;
}

.map{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:22px;
}

.path{
height:5px;
width:45px;
background:#ffffff30;
}

.level{
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:27px;
border:3px solid #ffffff35;
background:#ffffff12;
}

.level.active{
border-color:#ffd86b;
box-shadow:0 0 20px #ffd86b;
}

.level.completed{
background:#2acb86;
border-color:#2acb86;
}

.magic-area{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

.magic-item{
height:145px;
border:0;
border-radius:22px;
cursor:pointer;
color:white;
background:
linear-gradient(145deg,#7142b9,#3a2169);
box-shadow:0 10px 25px #0008;
transition:.25s;
}

.magic-item:hover{
transform:translateY(-7px) scale(1.03);
}

.magic-item.completed{
opacity:.35;
cursor:default;
transform:none;
}

.magic-icon{
font-size:55px;
display:block;
margin-bottom:7px;
}

.magic-label{
font-size:13px;
font-weight:bold;
}

.challenge{
display:none;
margin-top:24px;
background:white;
color:#21152f;
border-radius:26px;
padding:25px;
box-shadow:0 15px 40px #0009;
}

.spell{
font-size:50px;
animation:float 1s infinite alternate;
}

@keyframes float{
from{transform:translateY(0)}
to{transform:translateY(-8px)}
}

.challenge-type{
font-size:13px;
font-weight:bold;
color:#7244a8;
}

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

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

.option{
border:2px solid #ddd5e9;
background:#f8f5fc;
color:#241732;
padding:15px;
border-radius:15px;
font-size:16px;
font-weight:bold;
cursor:pointer;
}

.option:hover{
background:#eee6fa;
}

.option.correct{
background:#31c985!important;
color:white!important;
border-color:#31c985;
}

.option.wrong{
background:#ef5350!important;
color:white!important;
border-color:#ef5350;
}

.feedback{
min-height:30px;
margin-top:18px;
font-size:20px;
font-weight:bold;
}

.result{
display:none;
margin-top:25px;
background:#ffffff12;
border-radius:28px;
padding:32px;
border:1px solid #ffffff20;
}

.final-score{
font-size:65px;
font-weight:bold;
color:#ffd86b;
}

.rank{
font-size:26px;
margin:10px 0;
color:#e3c5ff;
}

.restart{
border:0;
background:#ffd86b;
color:#241732;
font-weight:bold;
font-size:17px;
padding:14px 25px;
border-radius:15px;
cursor:pointer;
margin-top:12px;
}

@media(max-width:650px){

.magic-area{
grid-template-columns:repeat(2,1fr);
}

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

.map{
transform:scale(.85);
}

.magic-item{
height:130px;
}

}
</style>
</head>

<body>

<div class="game">

<h1>🔮 Keerthi's Tense Magic Quest</h1>

<div class="subtitle">
✨ Enter the Tense Kingdom • Master the magic • Become the Tense Wizard
</div>

<div class="stats">

<div class="stat">
⭐ Magic Power: <span id="score">0</span>
</div>

<div class="stat">
🔥 Spell Streak: <span id="streak">0</span>
</div>

<div class="stat">
💎 Quest Items: <span id="left">20</span>
</div>

</div>


<div class="quest">

<div class="kingdom">
🏰 KEERTHI'S TENSE KINGDOM
</div>

<div class="map">

<div class="level active">🌱</div>

<div class="path"></div>

<div class="level">🌊</div>

<div class="path"></div>

<div class="level">💎</div>

<div class="path"></div>

<div class="level">👑</div>

</div>

<div class="magic-area" id="magicArea"></div>

</div>


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

<div class="spell">🔮</div>

<div class="challenge-type" id="type"></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>👑 QUEST COMPLETE!</h2>

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

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

<p id="message"></p>

<p>
✨ Keerthi's Tense Kingdom has been conquered! ✨
</p>

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

</div>

</div>


<script>

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

let audio;

function playSound(type){

try{

if(!audio){

audio=new(
window.AudioContext||
window.webkitAudioContext
)();

}

let oscillator=
audio.createOscillator();

let gain=
audio.createGain();

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

if(type==="open")
oscillator.frequency.value=500;

if(type==="correct")
oscillator.frequency.value=850;

if(type==="wrong")
oscillator.frequency.value=170;

if(type==="win")
oscillator.frequency.value=1100;

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

gain.gain.exponentialRampToValueAtTime(
0.001,
audio.currentTime+0.3
);

oscillator.start();

oscillator.stop(
audio.currentTime+0.3
);

}catch(e){}

}


/* =================================
   TENSE QUEST DATABASE
================================= */

const questions=[

/* SIMPLE TENSES
   MAIN FOCUS
*/

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"🪄 HELPING-VERB SPELL",
q:"___ you like English?",
o:["Do","Are","Have","Were"],
a:0,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"🪄 HELPING-VERB SPELL",
q:"She ___ not play tennis.",
o:["do","does","is","has"],
a:1,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"🔮 PAST SPELL",
q:"___ they visit their grandmother yesterday?",
o:["Do","Does","Did","Are"],
a:2,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"✨ FUTURE SPELL",
q:"I ___ go to school tomorrow.",
o:["will","am","have","was"],
a:0,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"💎 MAGIC KEY",
q:"He ___ a new bicycle.",
o:["have","has","is","did"],
a:1,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"🌙 PAST MAGIC",
q:"We ___ happy yesterday.",
o:["are","is","were","will"],
a:2,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"🌸 PRESENT SPELL",
q:"She ___ beautiful flowers every morning.",
o:["waters","watered","will water","is watering"],
a:0,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"⚔️ NEGATIVE SPELL",
q:"They ___ not go to school yesterday.",
o:["do","does","did","are"],
a:2,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"🔍 TENSE DETECTIVE",
q:"Which sentence is Present Simple?",
o:[
"She is reading now.",
"She reads every day.",
"She read yesterday.",
"She will read tomorrow."
],
a:1,
points:20
},

{
zone:"⭐⭐⭐⭐⭐ SIMPLE TENSE",
type:"🔄 TENSE TRANSFORMER",
q:"Change to Past Simple: I play cricket.",
o:[
"I played cricket.",
"I will play cricket.",
"I am playing cricket.",
"I have played cricket."
],
a:0,
points:20
},

/* CONTINUOUS */

{
zone:"⭐⭐⭐ CONTINUOUS",
type:"🌊 CONTINUOUS MAGIC",
q:"She ___ reading now.",
o:["is","was","has","had"],
a:0,
points:10
},

{
zone:"⭐⭐⭐ CONTINUOUS",
type:"🌊 PAST MAGIC",
q:"They ___ playing yesterday evening.",
o:["are","were","have","will"],
a:1,
points:10
},

{
zone:"⭐⭐⭐ CONTINUOUS",
type:"🌊 FUTURE MAGIC",
q:"We ___ be studying tomorrow evening.",
o:["are","were","will","have"],
a:2,
points:10
},

{
zone:"⭐⭐⭐ CONTINUOUS",
type:"🔮 SPELL DETECTOR",
q:"Which is Present Continuous?",
o:[
"He plays cricket.",
"He played cricket.",
"He is playing cricket.",
"He will play cricket."
],
a:2,
points:10
},

/* PERFECT */

{
zone:"⭐⭐ PERFECT",
type:"💎 PERFECT MAGIC",
q:"She ___ finished her work.",
o:["has","is","was","will"],
a:0,
points:5
},

{
zone:"⭐⭐ PERFECT",
type:"💎 PAST PERFECT MAGIC",
q:"They ___ completed the work before lunch.",
o:["have","had","are","will"],
a:1,
points:5
},

/* PERFECT CONTINUOUS */

{
zone:"⭐ PERFECT CONTINUOUS",
type:"🌟 RARE MAGIC",
q:"He ___ been working for two hours.",
o:["has","is","was","will"],
a:0,
points:5
},

{
zone:"⭐ PERFECT CONTINUOUS",
type:"🌟 RARE MAGIC",
q:"They ___ been waiting before the bus arrived.",
o:["have","had","are","will"],
a:1,
points:5
},

/* BONUS SIMPLE */

{
zone:"⭐⭐⭐⭐⭐ GOLDEN BONUS",
type:"👑 KING'S SPELL",
q:"Which helping verb belongs to Past Simple questions?",
o:[
"Do",
"Does",
"Did",
"Will"
],
a:2,
points:30
},

{
zone:"⭐⭐⭐⭐⭐ GOLDEN BONUS",
type:"👑 QUEEN'S SPELL",
q:"Which helping verb belongs to Future Simple?",
o:[
"Did",
"Does",
"Will",
"Has"
],
a:2,
points:30
}

];


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

let score=0;
let streak=0;
let completed=0;
let current=null;
let currentItem=null;
let answered=false;


/* =================================
   CREATE MAGIC ITEMS
================================= */

const area=
document.getElementById("magicArea");

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

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

item.className="magic-item";

item.innerHTML=`

<span class="magic-icon">

${index<10?"🔮":index<14?"🌊":index<18?"💎":"👑"}

</span>

<span class="magic-label">
MAGIC ${index+1}
</span>

`;

item.addEventListener(
"click",
()=>openMagic(item,q)
);

area.appendChild(item);

});


/* =================================
   OPEN MAGIC
================================= */

function openMagic(item,q){

if(item.classList.contains("completed"))
return;

current=q;
currentItem=item;
answered=false;

playSound("open");

item.classList.add("completed");

setTimeout(()=>{

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

document.getElementById(
"type"
).textContent=
q.zone+" • "+q.type;

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

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

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

options.innerHTML="";

q.o.forEach((text,index)=>{

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

button.className="option";

button.textContent=text;

button.addEventListener(
"click",
()=>answer(index,button)
);

options.appendChild(button);

});

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

},300);

}


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

function answer(index,button){

if(answered)
return;

answered=true;

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

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

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

if(index===current.a){

button.classList.add("correct");

score+=current.points;

streak++;

feedback.innerHTML=
"✨ SPELL SUCCESSFUL! +"+
current.points+
" MAGIC POWER!";

playSound("correct");

}else{

button.classList.add("wrong");

buttons[current.a]
.classList.add("correct");

streak=0;

feedback.innerHTML=
"💥 SPELL FAILED!<br>"+
"Correct answer: "+
current.o[current.a];

playSound("wrong");

}

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

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

completed++;

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


/* CLOSE CHALLENGE */

setTimeout(()=>{

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

if(completed===questions.length){

finishQuest();

}

},1200);

}


/* =================================
   FINISH QUEST
================================= */

function finishQuest(){

document.querySelector(
".quest"
).style.display="none";

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

result.style.display="block";

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

let rank;
let message;

if(score>=300){

rank="👑 KEERTHI — TENSE WIZARD MASTER";

message=
"🌟 Legendary! You have conquered the Tense Kingdom!";

}
else if(score>=240){

rank="🧙 KEERTHI — MASTER WIZARD";

message=
"🔮 Excellent! Your tense and helping-verb grip is very strong.";

}
else if(score>=180){

rank="✨ KEERTHI — RISING WIZARD";

message=
"💪 Good work! Strengthen your Simple Tenses even more.";

}
else{

rank="🌱 KEERTHI — MAGIC APPRENTICE";

message=
"🪄 Start with Simple Tenses and helping verbs. Your magic will grow!";

}

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

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

playSound("win");

}

</script>

</body>
</html>
Game Source: Keerthi's Tense Magic Quest

Creator: UltraOwl78
Libraries: none
Complexity: complex (937 lines, 12.7 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: keerthi-s-tense-magic-quest-ultraowl78" to link back to the original. Then publish at arcadelab.ai/publish.