|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Exam Chapter Viewer</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
|
|
background-color: #f0f2f5; |
|
|
color: #333; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: flex-start; |
|
|
min-height: 100vh; |
|
|
margin: 0; |
|
|
padding: 40px; |
|
|
} |
|
|
.container { |
|
|
width: 90%; |
|
|
max-width: 600px; |
|
|
background-color: #ffffff; |
|
|
padding: 30px; |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
h1 { |
|
|
text-align: center; |
|
|
color: #1c1e21; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
.controls { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
margin-bottom: 30px; |
|
|
} |
|
|
select { |
|
|
width: 100%; |
|
|
padding: 12px; |
|
|
font-size: 16px; |
|
|
border: 1px solid #dddfe2; |
|
|
border-radius: 6px; |
|
|
cursor: pointer; |
|
|
} |
|
|
select:disabled { |
|
|
background-color: #e4e6eb; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
#chapter-links a { |
|
|
display: block; |
|
|
padding: 12px; |
|
|
margin-bottom: 8px; |
|
|
background-color: #e7f3ff; |
|
|
color: #1877f2; |
|
|
text-decoration: none; |
|
|
border-radius: 6px; |
|
|
transition: background-color 0.2s, transform 0.2s; |
|
|
} |
|
|
#chapter-links a:hover { |
|
|
background-color: #d0e7ff; |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<div class="container"> |
|
|
<h1>📚 Lakshita's Learning App - Class 8</h1> |
|
|
<div class="controls"> |
|
|
<select id="exam-select"> |
|
|
<option value="">-- Select Exam --</option> |
|
|
</select> |
|
|
<select id="subject-select" disabled> |
|
|
<option value="">-- Select Subject --</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="chapter-links"></div> |
|
|
|
|
|
<div style="margin-top: 40px; padding: 20px; border-top: 2px solid #eee; text-align: center;"> |
|
|
<h2>✨ How to Use This Magic Study Machine! ✨</h2> |
|
|
<p>Tired of searching for notes? Just follow this super-easy recipe for success!</p> |
|
|
<ol style="list-style: none; padding: 0;"> |
|
|
<li style="font-size: 18px; margin-bottom: 10px;"><b>Step 1️⃣:</b> Pick your exam (like FA2 or SA1) from the first box.</li> |
|
|
<li style="font-size: 18px; margin-bottom: 10px;"><b>Step 2️⃣:</b> Choose your subject... are you a Biology brainiac 🧠 or a Physics pro ⚛️?</li> |
|
|
<li style="font-size: 18px;"><b>Step 3️⃣:</b> BAM! 🚀 All the chapters will appear below. Just click to open!</li> |
|
|
</ol> |
|
|
<p style="font-weight: bold; margin-top: 20px;">Happy studying! You've got this! 😎</p> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const examSelect = document.getElementById('exam-select'); |
|
|
const subjectSelect = document.getElementById('subject-select'); |
|
|
const chapterLinksDiv = document.getElementById('chapter-links'); |
|
|
|
|
|
let fileData = {}; |
|
|
|
|
|
|
|
|
fetch('filelist.json') |
|
|
.then(response => { |
|
|
if (!response.ok) { |
|
|
throw new Error("Could not find filelist.json. Please run the python script first."); |
|
|
} |
|
|
return response.json(); |
|
|
}) |
|
|
.then(filenames => { |
|
|
|
|
|
filenames.forEach(name => { |
|
|
const parts = name.replace('.html', '').split('_'); |
|
|
if (parts.length < 3) return; |
|
|
|
|
|
const exam = parts[0]; |
|
|
const subject = parts[1]; |
|
|
|
|
|
if (!fileData[exam]) { |
|
|
fileData[exam] = {}; |
|
|
} |
|
|
if (!fileData[exam][subject]) { |
|
|
fileData[exam][subject] = []; |
|
|
} |
|
|
fileData[exam][subject].push(name); |
|
|
}); |
|
|
|
|
|
|
|
|
const exams = Object.keys(fileData).sort(); |
|
|
exams.forEach(exam => { |
|
|
const option = document.createElement('option'); |
|
|
option.value = exam; |
|
|
option.textContent = exam; |
|
|
examSelect.appendChild(option); |
|
|
}); |
|
|
}) |
|
|
.catch(error => { |
|
|
chapterLinksDiv.innerHTML = `<p style="color:red;"><b>Error:</b> ${error.message}</p>`; |
|
|
console.error(error); |
|
|
}); |
|
|
|
|
|
|
|
|
examSelect.addEventListener('change', () => { |
|
|
const selectedExam = examSelect.value; |
|
|
|
|
|
|
|
|
subjectSelect.innerHTML = '<option value="">-- Select Subject --</option>'; |
|
|
subjectSelect.disabled = true; |
|
|
chapterLinksDiv.innerHTML = ''; |
|
|
|
|
|
if (selectedExam && fileData[selectedExam]) { |
|
|
const subjects = Object.keys(fileData[selectedExam]).sort(); |
|
|
subjects.forEach(subject => { |
|
|
const option = document.createElement('option'); |
|
|
option.value = subject; |
|
|
option.textContent = subject; |
|
|
subjectSelect.appendChild(option); |
|
|
}); |
|
|
subjectSelect.disabled = false; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
subjectSelect.addEventListener('change', () => { |
|
|
const selectedExam = examSelect.value; |
|
|
const selectedSubject = subjectSelect.value; |
|
|
|
|
|
chapterLinksDiv.innerHTML = ''; |
|
|
|
|
|
if (selectedExam && selectedSubject && fileData[selectedExam][selectedSubject]) { |
|
|
const files = fileData[selectedExam][selectedSubject].sort(); |
|
|
files.forEach(filename => { |
|
|
const chapterPart = filename.replace('.html', '').split('_').slice(2).join(' '); |
|
|
const displayName = chapterPart.replace("CH", "Chapter").trim(); |
|
|
|
|
|
const link = document.createElement('a'); |
|
|
link.href = `data/${filename}`; |
|
|
link.textContent = displayName; |
|
|
link.target = '_blank'; |
|
|
chapterLinksDiv.appendChild(link); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
