RARE StudyBook Engine v5.0

RARE StudyBook Engine v5.0

Physics MCQs

Practice Basic, Advanced and HOTS MCQs with instant answer checking, explanations, score tracking and review mode.

Progress : 0%
/*===================================================== RARE StudyBook Engine v5.0 PART 2 : COMPLETE CSS ======================================================*/ /*========================= ROOT VARIABLES =========================*/ :root{ --primary:#2563eb; --primary-dark:#1d4ed8; --success:#16a34a; --danger:#dc2626; --warning:#f59e0b; --bg:#f5f7fb; --card:#ffffff; --text:#1f2937; --text-light:#6b7280; --border:#e5e7eb; --radius:12px; --shadow:0 5px 18px rgba(0,0,0,.08); } /*========================= MAIN CONTAINER =========================*/ #rareStudyBook{ max-width:1100px; margin:30px auto; padding:20px; font-family:Arial,Helvetica,sans-serif; background:var(--bg); color:var(--text); box-sizing:border-box; } /*========================= HEADER =========================*/ .rare-header{ text-align:center; margin-bottom:25px; } .rare-header h1{ margin:0; font-size:34px; color:var(--primary); } #chapterDescription{ margin-top:12px; line-height:1.7; color:var(--text-light); font-size:16px; } /*========================= CATEGORY BAR =========================*/ .rare-category-bar{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:25px; } .category-btn{ padding:12px 22px; border:none; border-radius:40px; background:#fff; box-shadow:var(--shadow); cursor:pointer; transition:.3s; font-size:15px; font-weight:600; } .category-btn span{ display:block; font-size:12px; margin-top:4px; font-weight:normal; } .category-btn:hover{ background:var(--primary); color:#fff; } .category-btn.active{ background:var(--primary); color:#fff; } /*========================= SEARCH BOX =========================*/ .rare-search-area{ margin-bottom:20px; } #searchBox{ width:100%; padding:14px 16px; border:1px solid var(--border); border-radius:10px; font-size:16px; outline:none; box-sizing:border-box; } #searchBox:focus{ border-color:var(--primary); } /*========================= PROGRESS BAR =========================*/ .rare-progress-area{ margin-bottom:25px; } .progress-track{ height:12px; background:#ddd; border-radius:50px; overflow:hidden; } #progressFill{ height:100%; width:0%; background:linear-gradient(90deg,#2563eb,#16a34a); transition:.5s; } #progressText{ margin-top:10px; text-align:right; font-weight:bold; } /*========================= SCORE CARD =========================*/ #scoreCard{ position:sticky; top:15px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:30px; z-index:99; } .score-item{ background:var(--card); padding:15px; border-radius:12px; text-align:center; box-shadow:var(--shadow); } .score-title{ font-size:14px; color:var(--text-light); margin-bottom:10px; } .score-item div:last-child{ font-size:24px; font-weight:bold; color:var(--primary); } /*========================= MCQ CARD =========================*/ .rare-card{ background:var(--card); padding:22px; margin-bottom:22px; border-radius:12px; box-shadow:var(--shadow); } .rare-number{ font-size:15px; font-weight:bold; color:var(--primary); margin-bottom:12px; } .rare-question{ font-size:18px; line-height:1.7; font-weight:600; margin-bottom:18px; } /*========================= OPTIONS =========================*/ .rare-options{ display:grid; gap:12px; } .option-btn{ padding:14px; text-align:left; background:#fff; border:1px solid var(--border); border-radius:10px; cursor:pointer; font-size:15px; transition:.3s; } .option-btn:hover{ background:#eef4ff; border-color:var(--primary); } /*========================= ANSWER BOX =========================*/ .answer-box{ display:none; margin-top:20px; padding:16px; border-left:5px solid var(--primary); background:#f8fbff; border-radius:8px; } .correct-answer{ font-weight:bold; color:var(--success); margin-bottom:10px; } .answer-explanation{ line-height:1.8; } /*========================= NAVIGATION =========================*/ .rare-navigation{ display:flex; gap:15px; margin-top:25px; } .rare-navigation button{ flex:1; padding:14px; border:none; background:var(--primary); color:#fff; font-size:16px; font-weight:bold; border-radius:10px; cursor:pointer; transition:.3s; } .rare-navigation button:hover{ background:var(--primary-dark); } /*========================= REVIEW BUTTON =========================*/ .rare-review{ margin-top:20px; text-align:center; } #reviewBtn{ padding:15px 28px; background:var(--warning); color:#fff; border:none; border-radius:40px; font-size:16px; font-weight:bold; cursor:pointer; transition:.3s; } #reviewBtn:hover{ opacity:.9; } /*========================= RESULT DASHBOARD =========================*/ #resultDashboard{ display:none; margin-top:30px; padding:20px; background:#fff; border-radius:12px; box-shadow:var(--shadow); } /*========================= CORRECT / WRONG COLORS =========================*/ .correct-option{ background:#22c55e !important; color:#fff; border-color:#22c55e !important; } .wrong-option{ background:#ef4444 !important; color:#fff; border-color:#ef4444 !important; } .option-btn:disabled{ cursor:not-allowed; opacity:.95; } /*========================= MOBILE =========================*/ @media(max-width:768px){ #rareStudyBook{ padding:15px; } .rare-header h1{ font-size:28px; } #scoreCard{ grid-template-columns:repeat(2,1fr); } .rare-navigation{ flex-direction:column; } .category-btn{ width:100%; } } /*===================================================== RARE StudyBook Engine v5.0 PART 3 : JAVASCRIPT FOUNDATION ======================================================*/ /*===================================================== ENGINE CONFIGURATION ======================================================*/ const ENGINE = { version: "5.0", title: "RARE StudyBook Engine", totalMCQs: 250, categories: { basic: { start: 1, end: 100, title: "Basic MCQs" }, advanced: { start: 101, end: 200, title: "Advanced MCQs" }, hots: { start: 201, end: 250, title: "HOTS MCQs" } } }; /*===================================================== GLOBAL VARIABLES ======================================================*/ let mcqs = []; let currentCategory = "basic"; let currentMCQ = 1; let score = 0; let correctAnswers = 0; let wrongAnswers = 0; let attemptedQuestions = 0; let answeredQuestions = new Set(); let reviewQuestions = []; let darkMode = false; /*===================================================== DOM ELEMENTS ======================================================*/ const mcqContainer = document.getElementById("mcqContainer"); const progressFill = document.getElementById("progressFill"); const progressText = document.getElementById("progressText"); const searchBox = document.getElementById("searchBox"); const scoreValue = document.getElementById("scoreValue"); const correctValue = document.getElementById("correctValue"); const wrongValue = document.getElementById("wrongValue"); const remainingValue = document.getElementById("remainingValue"); const resultDashboard = document.getElementById("resultDashboard"); /*===================================================== CATEGORY INFORMATION ======================================================*/ function getCategoryInfo(category){ return ENGINE.categories[category]; } /*===================================================== RESET ENGINE ======================================================*/ function resetCategoryProgress(){ score = 0; correctAnswers = 0; wrongAnswers = 0; attemptedQuestions = 0; answeredQuestions.clear(); reviewQuestions = []; updateScoreCard(); updateProgress(); } /*===================================================== UPDATE SCORE CARD ======================================================*/ function updateScoreCard(){ scoreValue.textContent = score; correctValue.textContent = correctAnswers; wrongValue.textContent = wrongAnswers; const info = getCategoryInfo(currentCategory); const total = info.end - info.start + 1; remainingValue.textContent = total - attemptedQuestions; } /*===================================================== UPDATE PROGRESS BAR ======================================================*/ function updateProgress(){ const info = getCategoryInfo(currentCategory); const total = info.end - info.start + 1; const percent = Math.round((attemptedQuestions / total) * 100); progressFill.style.width = percent + "%"; progressText.innerHTML = "Progress : " + percent + "%"; } /*===================================================== CHANGE CATEGORY ======================================================*/ function loadCategory(category){ currentCategory = category; currentMCQ = ENGINE.categories[category].start; document.querySelectorAll(".category-btn") .forEach(btn=>btn.classList.remove("active")); document.querySelector( '.category-btn[data-category="'+category+'"]' ).classList.add("active"); resetCategoryProgress(); renderMCQs(); } /*===================================================== PAGE LOAD ======================================================*/ window.onload = function(){ updateScoreCard(); updateProgress(); loadCategory("basic"); }; /*===================================================== RARE StudyBook Engine v5.0 PART 4 : MCQ RENDERING ENGINE ======================================================*/ /*===================================================== RENDER MCQs ======================================================*/ function renderMCQs() { const info = getCategoryInfo(currentCategory); let html = ""; for (let i = info.start; i <= info.end; i++) { const q = mcqs[i]; if (!q) continue; html += `
MCQ No. ${i}
${q.question}
${renderOptions(i, q)}
`; } mcqContainer.innerHTML = html; } /*===================================================== CREATE OPTION BUTTONS ======================================================*/ function renderOptions(mcqNo, question) { let buttons = ""; const letters = ["A", "B", "C", "D"]; for (let i = 0; i < question.options.length; i++) { buttons += ` `; } return buttons; } /*===================================================== DISPLAY EXPLANATION ======================================================*/ function showExplanation(mcqNo) { const q = mcqs[mcqNo]; const answerBox = document.getElementById( "answerBox-" + mcqNo ); const answerText = document.getElementById( "correctAnswer-" + mcqNo ); const explanation = document.getElementById( "explanation-" + mcqNo ); answerText.innerHTML = ["A","B","C","D"][q.answer]; explanation.innerHTML = q.explanation; answerBox.style.display = "block"; } /*===================================================== SCROLL TO MCQ ======================================================*/ function scrollToMCQ(mcqNo){ const card = document.getElementById( "mcq-" + mcqNo ); if(card){ card.scrollIntoView({ behavior:"smooth", block:"start" }); } } /*===================================================== REFRESH CURRENT CATEGORY ======================================================*/ function refreshCategory(){ renderMCQs(); updateProgress(); updateScoreCard(); } /*===================================================== RARE StudyBook Engine v5.0 PART 5 : INSTANT ANSWER CHECKING ENGINE ======================================================*/ /*===================================================== CHECK ANSWER ======================================================*/ function checkAnswer(mcqNo, selectedOption, clickedButton){ // Prevent multiple attempts if(answeredQuestions.has(mcqNo)){ return; } answeredQuestions.add(mcqNo); attemptedQuestions++; const q = mcqs[mcqNo]; const optionButtons = document .getElementById("mcq-" + mcqNo) .querySelectorAll(".option-btn"); // Disable all buttons optionButtons.forEach(function(btn){ btn.disabled = true; }); /*---------------------------------- CORRECT ANSWER ----------------------------------*/ if(selectedOption === q.answer){ clickedButton.classList.add("correct-option"); score++; correctAnswers++; } /*---------------------------------- WRONG ANSWER ----------------------------------*/ else{ clickedButton.classList.add("wrong-option"); optionButtons[q.answer] .classList.add("correct-option"); wrongAnswers++; reviewQuestions.push(mcqNo); } /*---------------------------------- SHOW EXPLANATION ----------------------------------*/ showExplanation(mcqNo); /*---------------------------------- UPDATE DASHBOARD ----------------------------------*/ updateScoreCard(); updateProgress(); } /*===================================================== RARE StudyBook Engine v5.0 PART 6 : LIVE SCORE DASHBOARD ======================================================*/ /*===================================================== CALCULATE TOTAL QUESTIONS ======================================================*/ function getCurrentCategoryTotal(){ const info = getCategoryInfo(currentCategory); return (info.end - info.start + 1); } /*===================================================== CALCULATE REMAINING QUESTIONS ======================================================*/ function getRemainingQuestions(){ return getCurrentCategoryTotal() - attemptedQuestions; } /*===================================================== CALCULATE ACCURACY ======================================================*/ function getAccuracy(){ if(attemptedQuestions === 0){ return 0; } return Math.round( (correctAnswers / attemptedQuestions) * 100 ); } /*===================================================== CALCULATE SCORE PERCENTAGE ======================================================*/ function getScorePercentage(){ return Math.round( (correctAnswers / getCurrentCategoryTotal()) * 100 ); } /*===================================================== UPDATE LIVE DASHBOARD ======================================================*/ function updateDashboard(){ updateScoreCard(); updateProgress(); updateStatistics(); } /*===================================================== UPDATE STATISTICS ======================================================*/ function updateStatistics(){ /* Score */ scoreValue.textContent = score; /* Correct */ correctValue.textContent = correctAnswers; /* Wrong */ wrongValue.textContent = wrongAnswers; /* Remaining */ remainingValue.textContent = getRemainingQuestions(); /* Extra Statistics */ const accuracy = document.getElementById( "accuracyValue" ); if(accuracy){ accuracy.textContent = getAccuracy() + "%"; } const percentage = document.getElementById( "percentageValue" ); if(percentage){ percentage.textContent = getScorePercentage() + "%"; } } /*===================================================== RARE StudyBook Engine v5.0 PART 7 : NAVIGATION ENGINE ======================================================*/ /*===================================================== GO TO A SPECIFIC MCQ ======================================================*/ function goToMCQ(mcqNo){ const card = document.getElementById("mcq-" + mcqNo); if(!card) return; currentMCQ = mcqNo; highlightCurrentMCQ(); card.scrollIntoView({ behavior:"smooth", block:"start" }); } /*===================================================== NEXT MCQ ======================================================*/ function nextMCQ(){ const info = getCategoryInfo(currentCategory); if(currentMCQ < info.end){ currentMCQ++; goToMCQ(currentMCQ); } } /*===================================================== PREVIOUS MCQ ======================================================*/ function previousMCQ(){ const info = getCategoryInfo(currentCategory); if(currentMCQ > info.start){ currentMCQ--; goToMCQ(currentMCQ); } } /*===================================================== HIGHLIGHT CURRENT MCQ ======================================================*/ function highlightCurrentMCQ(){ document.querySelectorAll(".rare-card") .forEach(function(card){ card.classList.remove("active-mcq"); }); const activeCard = document.getElementById( "mcq-" + currentMCQ ); if(activeCard){ activeCard.classList.add("active-mcq"); } } /*===================================================== NAVIGATION BUTTON EVENTS ======================================================*/ document.getElementById("nextBtn") .addEventListener("click",function(){ nextMCQ(); }); document.getElementById("previousBtn") .addEventListener("click",function(){ previousMCQ(); }); /*===================================================== KEYBOARD NAVIGATION ======================================================*/ document.addEventListener("keydown",function(e){ // Ignore when typing in search box if(document.activeElement.id==="searchBox") return; if(e.key==="ArrowRight"){ nextMCQ(); } if(e.key==="ArrowLeft"){ previousMCQ(); } }); /*===================================================== RARE StudyBook Engine v5.0 PART 8 : SMART SEARCH ENGINE ======================================================*/ /*===================================================== SEARCH MCQs ======================================================*/ function searchMCQs(keyword){ keyword = keyword.toLowerCase().trim(); const cards = document.querySelectorAll(".rare-card"); // Empty search -> show everything if(keyword===""){ cards.forEach(function(card){ card.style.display="block"; }); return; } cards.forEach(function(card){ const number = card.querySelector(".rare-number") .textContent.toLowerCase(); const question = card.querySelector(".rare-question") .textContent.toLowerCase(); if( number.includes(keyword) || question.includes(keyword) ){ card.style.display="block"; } else{ card.style.display="none"; } }); } /*===================================================== CLEAR SEARCH ======================================================*/ function clearSearch(){ searchBox.value=""; searchMCQs(""); } /*===================================================== SEARCH BY MCQ NUMBER ======================================================*/ function goToQuestionByNumber(mcqNo){ const info = getCategoryInfo(currentCategory); if(mcqNo < info.start || mcqNo > info.end){ alert( "MCQ No. " + mcqNo + " is not available in the current category." ); return; } clearSearch(); goToMCQ(mcqNo); } /*===================================================== SEARCH INPUT EVENT ======================================================*/ searchBox.addEventListener("input",function(){ searchMCQs(this.value); }); /*===================================================== ENTER KEY SUPPORT ======================================================*/ searchBox.addEventListener("keydown",function(e){ if(e.key!=="Enter") return; const value=this.value.trim(); // If only digits, treat as MCQ number if(/^\d+$/.test(value)){ goToQuestionByNumber(parseInt(value)); } }); /*===================================================== RARE StudyBook Engine v5.0 PART 9 : REVIEW MODE ENGINE ======================================================*/ /*===================================================== REVIEW MODE VARIABLES ======================================================*/ let reviewMode = false; /*===================================================== START REVIEW MODE ======================================================*/ function startReviewMode(){ if(reviewQuestions.length === 0){ alert("Excellent! No incorrect questions to review."); return; } reviewMode = true; document.querySelectorAll(".rare-card").forEach(function(card){ card.style.display = "none"; }); reviewQuestions.forEach(function(mcqNo){ const card = document.getElementById("mcq-" + mcqNo); if(card){ card.style.display = "block"; } }); goToMCQ(reviewQuestions[0]); updateReviewButton(); } /*===================================================== EXIT REVIEW MODE ======================================================*/ function exitReviewMode(){ reviewMode = false; clearSearch(); document.querySelectorAll(".rare-card").forEach(function(card){ card.style.display = "block"; }); updateReviewButton(); } /*===================================================== TOGGLE REVIEW MODE ======================================================*/ function toggleReviewMode(){ if(reviewMode){ exitReviewMode(); }else{ startReviewMode(); } } /*===================================================== UPDATE REVIEW BUTTON ======================================================*/ function updateReviewButton(){ const btn = document.getElementById("reviewBtn"); if(reviewMode){ btn.innerHTML = "Exit Review Mode"; btn.classList.add("review-active"); }else{ btn.innerHTML = "Review Incorrect Questions (" + reviewQuestions.length + ")"; btn.classList.remove("review-active"); } } /*===================================================== CLEAR REVIEW LIST ======================================================*/ function clearReviewList(){ reviewQuestions = []; reviewMode = false; updateReviewButton(); } /*===================================================== REVIEW BUTTON EVENT ======================================================*/ document.getElementById("reviewBtn") .addEventListener("click",function(){ toggleReviewMode(); }); /*===================================================== RARE StudyBook Engine v5.0 PART 10 : RESULT DASHBOARD ======================================================*/ /*===================================================== SHOW RESULT DASHBOARD ======================================================*/ function showResultDashboard(){ const total = getCurrentCategoryTotal(); const unanswered = total - attemptedQuestions; const percentage = getScorePercentage(); const accuracy = getAccuracy(); const grade = calculateGrade(percentage); const message = getPerformanceMessage(percentage); resultDashboard.style.display = "block"; resultDashboard.innerHTML = `

Quiz Completed 🎉

Total Questions ${total}
Correct Answers ${correctAnswers}
Wrong Answers ${wrongAnswers}
Unanswered ${unanswered}
Score ${score}/${total}
Percentage ${percentage}%
Accuracy ${accuracy}%
Grade ${grade}
${message}
`; } /*===================================================== CALCULATE GRADE ======================================================*/ function calculateGrade(percent){ if(percent>=90) return "A+"; if(percent>=80) return "A"; if(percent>=70) return "B"; if(percent>=60) return "C"; if(percent>=50) return "D"; return "Needs Improvement"; } /*===================================================== PERFORMANCE MESSAGE ======================================================*/ function getPerformanceMessage(percent){ if(percent>=90) return "Outstanding performance! Keep it up."; if(percent>=80) return "Excellent work. You have mastered this topic."; if(percent>=70) return "Very good! A little more practice will make you perfect."; if(percent>=60) return "Good effort. Revise the incorrect questions."; if(percent>=50) return "Fair attempt. More practice is recommended."; return "Please review the chapter and try again."; } /*===================================================== HIDE RESULT DASHBOARD ======================================================*/ function hideResultDashboard(){ resultDashboard.style.display="none"; } /*===================================================== RESTART CURRENT CATEGORY ======================================================*/ function restartCategory(){ hideResultDashboard(); loadCategory(currentCategory); } /*===================================================== RARE StudyBook Engine v5.0 PART 11 : SETTINGS & LOCAL STORAGE ======================================================*/ const STORAGE_KEY = "rareStudyBook_v5"; /*===================================================== SAVE USER PROGRESS ======================================================*/ function saveProgress(){ const data = { currentCategory, currentMCQ, score, correctAnswers, wrongAnswers, attemptedQuestions, reviewQuestions, answeredQuestions:[...answeredQuestions] }; localStorage.setItem( STORAGE_KEY, JSON.stringify(data) ); } /*===================================================== RESTORE USER PROGRESS ======================================================*/ function loadProgress(){ const data = localStorage.getItem(STORAGE_KEY); if(!data) return; try{ const saved = JSON.parse(data); currentCategory = saved.currentCategory || "basic"; currentMCQ = saved.currentMCQ || 1; score = saved.score || 0; correctAnswers = saved.correctAnswers || 0; wrongAnswers = saved.wrongAnswers || 0; attemptedQuestions = saved.attemptedQuestions || 0; reviewQuestions = saved.reviewQuestions || []; answeredQuestions = new Set( saved.answeredQuestions || [] ); } catch(error){ console.error("Unable to restore progress."); } } /*===================================================== RESET SAVED PROGRESS ======================================================*/ function resetSavedProgress(){ localStorage.removeItem(STORAGE_KEY); } /*===================================================== TOGGLE DARK MODE ======================================================*/ function toggleDarkMode(){ document.body.classList.toggle("rare-dark"); const enabled = document.body.classList.contains("rare-dark"); localStorage.setItem( "rareDarkMode", enabled ); } /*===================================================== RESTORE DARK MODE ======================================================*/ function restoreDarkMode(){ const enabled = localStorage.getItem("rareDarkMode"); if(enabled === "true"){ document.body.classList.add("rare-dark"); } } /*===================================================== RARE StudyBook Engine v5.0 PART 12 : FINAL ENGINE ======================================================*/ /*===================================================== TIMER ======================================================*/ let quizTimer = null; let elapsedSeconds = 0; function startTimer(){ stopTimer(); elapsedSeconds = 0; quizTimer = setInterval(function(){ elapsedSeconds++; updateTimer(); },1000); } function stopTimer(){ if(quizTimer){ clearInterval(quizTimer); quizTimer = null; } } function updateTimer(){ const timer = document.getElementById("timerValue"); if(!timer) return; const minutes = Math.floor(elapsedSeconds/60); const seconds = elapsedSeconds%60; timer.innerHTML = String(minutes).padStart(2,"0") + ":" + String(seconds).padStart(2,"0"); } /*===================================================== BOOKMARK SYSTEM ======================================================*/ let bookmarkedQuestions = []; function toggleBookmark(mcqNo){ const index = bookmarkedQuestions.indexOf(mcqNo); if(index===-1){ bookmarkedQuestions.push(mcqNo); } else{ bookmarkedQuestions.splice(index,1); } } /*===================================================== RANDOM QUIZ ======================================================*/ function startRandomQuiz(totalQuestions=20){ reviewMode=false; clearSearch(); document.querySelectorAll(".rare-card") .forEach(card=>card.style.display="none"); const info=getCategoryInfo(currentCategory); let list=[]; for(let i=info.start;i<=info.end;i++){ if(mcqs[i]){ list.push(i); } } list.sort(()=>Math.random()-0.5); list.slice(0,totalQuestions) .forEach(function(no){ const card=document.getElementById("mcq-"+no); if(card){ card.style.display="block"; } }); } /*===================================================== PRINT RESULT ======================================================*/ function printResult(){ window.print(); } /*===================================================== SHARE RESULT ======================================================*/ function shareResult(){ const text= "I scored " + score + "/" + getCurrentCategoryTotal() + " using the RARE StudyBook Engine."; if(navigator.share){ navigator.share({ title:"RARE StudyBook Result", text:text }); } } /*===================================================== RESET ENTIRE ENGINE ======================================================*/ function resetEngine(){ stopTimer(); resetSavedProgress(); bookmarkedQuestions=[]; reviewQuestions=[]; answeredQuestions.clear(); loadCategory("basic"); } /*===================================================== AUTO SAVE ======================================================*/ setInterval(function(){ saveProgress(); },30000); /*===================================================== START ENGINE ======================================================*/ document.addEventListener("DOMContentLoaded",function(){ startTimer(); });
cwebp -q 80 image.png -o image.webp