justin/linux
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Dark Mode toggle.

Browse Source
This commit is contained in:
Justin Oros
2025-11-06 10:39:09 -07:00
committed by GitHub
parent 9219d6300e
commit 1b57064e77
1 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+33 -8
View File
@@ -26,7 +26,7 @@
color: var(--fg); color: var(--fg);
transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s;
} }
h1 { text-align: center; } h1 { text-align: center; margin-top: 60px; }
.question { .question {
margin-bottom: 20px; margin-bottom: 20px;
background: var(--card-bg); background: var(--card-bg);
@@ -36,7 +36,12 @@
transition: background 0.3s; transition: background 0.3s;
} }
.answers { list-style-type: none; padding: 0; } .answers { list-style-type: none; padding: 0; }
.answers li { margin: 5px 0; cursor: pointer; border-radius: 4px; padding: 4px; } .answers li {
margin: 5px 0;
cursor: pointer;
border-radius: 4px;
padding: 4px;
}
button { button {
margin-top: 10px; margin-top: 10px;
padding: 5px 10px; padding: 5px 10px;
@@ -49,14 +54,25 @@
} }
button:hover { background: var(--button-hover); } button:hover { background: var(--button-hover); }
.result { font-weight: bold; margin-top: 10px; } .result { font-weight: bold; margin-top: 10px; }
#theme-toggle { #theme-toggle {
position: fixed; position: fixed;
top: 15px; top: 15px;
right: 20px; right: 20px;
background: none; background: var(--card-bg);
border: none; border: 2px solid var(--button-bg);
font-size: 1.5rem; border-radius: 50%;
width: 40px;
height: 40px;
font-size: 1.2rem;
cursor: pointer; cursor: pointer;
color: var(--fg);
z-index: 9999;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s, color 0.3s;
} }
</style> </style>
</head> </head>
@@ -117,7 +133,10 @@ function renderQuiz() {
div.className = 'question'; div.className = 'question';
div.setAttribute('data-answer', q.correct); div.setAttribute('data-answer', q.correct);
let answersHtml = q.a.map(ans => `<li>${ans}</li>`).join(''); let answersHtml = q.a.map(ans => `<li>${ans}</li>`).join('');
div.innerHTML = `<p>${i+1}. ${q.q}</p><ul class="answers">${answersHtml}</ul><button onclick="checkAnswer(this)">Check Answer</button><div class="result"></div>`; div.innerHTML = `<p>${i+1}. ${q.q}</p>
<ul class="answers">${answersHtml}</ul>
<button onclick="checkAnswer(this)">Check Answer</button>
<div class="result"></div>`;
container.appendChild(div); container.appendChild(div);
}); });
attachAnswerEvents(); attachAnswerEvents();
@@ -140,10 +159,16 @@ function checkAnswer(btn) {
if (!selected) { alert('Select an answer first!'); return; } if (!selected) { alert('Select an answer first!'); return; }
const idx = Array.from(selected.parentElement.children).indexOf(selected); const idx = Array.from(selected.parentElement.children).indexOf(selected);
const letters = ['a','b','c','d']; const letters = ['a','b','c','d'];
if (letters[idx] === correct) { result.textContent = 'Correct!'; result.style.color = 'green'; } if (letters[idx] === correct) {
else { result.textContent = 'Incorrect. Correct answer: ' + correct.toUpperCase(); result.style.color = 'red'; } result.textContent = 'Correct!';
result.style.color = 'green';
} else {
result.textContent = 'Incorrect. Correct answer: ' + correct.toUpperCase();
result.style.color = 'red';
}
} }
// Theme toggle logic
const toggleBtn = document.getElementById('theme-toggle'); const toggleBtn = document.getElementById('theme-toggle');
function setTheme(dark) { function setTheme(dark) {
document.body.classList.toggle('dark', dark); document.body.classList.toggle('dark', dark);