Untitled

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Quiz</title><style>
body{font-family:sans-serif;max-width:500px;margin:20px auto;padding:10px;background:#f0f2f5;color:#333}
.box{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);margin-bottom:15px;text-align:center}
button{background:#4f46e5;color:#fff;border:none;padding:8px 15px;margin:5px;border-radius:4px;cursor:pointer}
button:hover{background:#4338ca}#def{font-style:italic;color:#666;margin:10px 0}
</style></head><body>
<h2>Study Hub</h2>
<button onclick="mode('card')">Flashcards</button><button onclick="mode('quiz')">Quiz</button>
<div id="view"></div>
<script>
const data=[
  {t:"Oral Communication",d:"A purposeful presentation designed to increase knowledge."},
  {t:"Written Communication",d:"The ability to develop and exchange ideas in writing."},
  {t:"Communication Barriers",d:"Something that gets in the way of communication."},
  {t:"Internal Communication Barriers",d:"Internal distractions or hurdles, such as information overload."},
  {t:"External Communication Barriers",d:"Obstacles that block information between a sender and receiver."},
  {t:"Work Ethic",d:"A belief in the importance of hard work and diligence."},
  {t:"Productivity",d:"Being helpful and producing a high volume of quality work."},
  {t:"Time Management",d:"Saving time and using it efficiently to maximize output."},
  {t:"Adaptability",d:"Getting used to a new environment or changing conditions."},
  {t:"Employment",d:"An arrangement where an employer pays employees for work."},
  {t:"Collaboration",d:"Working together with others to achieve a common goal."},
  {t:"Teamwork",d:"Working together as a team to get something done."},
  {t:"Diversity",d:"Being different or consisting of distinct, varied elements."},
  {t:"Conflict Management",d:"The practice of resolving disagreements in a respectful manner."},
  {t:"Customer Service",d:"The help and assistance a company gives to people who buy their product."},
  {t:"Leadership Skills",d:"The abilities that educate and guide other students or employees in a way that promotes success."},
  {t:"Problem-Solving Skills",d:"The specific skills you need to analyze and solve a problem."},
  {t:"Decisiveness",d:"The ability to make good choices quickly and with confidence."},
  {t:"Ethical",d:"Following the established rules, morals, and standards of conduct."},
  {t:"Unethical",d:"Not following the rules or standards of conduct."}
];
let idx=0,score=0,showDef=false;
function mode(m){
  idx=0;score=0;
  if(m==='card') showCard();
  else nextQuiz();
}
function showCard(){
  showDef=false;
  const item=data[idx];
  document.getElementById('view').innerHTML=`
    <div class="box"><h3>${item.t}</h3><p id="def" style="display:none">${item.d}</p>
    <button onclick="document.getElementById('def').style.display='block'">Flip</button></div>
    <center><button onclick="idx=(idx-1+data.length)%data.length;showCard()">Prev</button>
    <span>${idx+1}/${data.length}</span>
    <button onclick="idx=(idx+1)%data.length;showCard()">Next</button></center>`;
}
function nextQuiz(){
  if(idx>=data.length){
    document.getElementById('view').innerHTML=`<div class="box"><h3>Finished!</h3><p>Score: ${score}/${data.length}</p></div>`;
    return;
  }
  const item=data[idx],options=[item,...data.filter(x=>x.t!==item.t).sort(()=>.5-Math.random()).slice(0,2)].sort(()=>.5-Math.random());
  let html=`<div class="box"><p><b>Definition:</b> ${item.d}</p><p>Score: ${score}</p>`;
  options.forEach(o=>{
    html+=`<button style="display:block;width:100%" onclick="check('${o.t}','${item.t}')">${o.t}</button>`;
Editor is loading...