23/08/2026
Programming & UI Quiz
* { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
body {
background: linear-gradient(135deg, , ); /* New gradient background */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}quiz-container {
width: 100%;
max-width: 500px;
}card {
background: ; /* New card color - light yellow */
border-radius: 20px;
padding: 25px;
box-shadow: 0 15px 35px rgba(0,0,0,0.25);
border: 3px solid ; /* Card border */
transition: 0.3s;
}progress {
text-align: center;
color: ;
font-weight: bold;
margin-bottom: 15px;
font-size: 18px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}question {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
color: ; /* Dark brown text */
}options button {
width: 100%;
padding: 14px;
margin: 8px 0;
border: 2px solid ; /* Orange border */
border-radius: 12px;
background: ; /* Light option bg */
font-size: 16px;
cursor: pointer;
transition: 0.2s;
text-align: left;
color: ;
font-weight: 500;
}options button:hover {
background: ;
transform: translateX(5px);
}options button.correct {
background: ; /* Green */
color: white;
border-color: ;
}options button.wrong {
background: ; /* Red */
color: white;
border-color: ;
}next-btn {
width: 100%;
padding: 14px;
margin-top: 15px;
background: ; /* Deep orange */
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
display: none;
}next-btn:hover {
background: ;
}score-board {
text-align: center;
font-size: 22px;
color: ;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}restart-btn {
background: white;
color: ;
border: none;
padding: 12px 25px;
border-radius: 10px;
margin-top: 15px;
cursor: pointer;
font-weight: bold;
}option-number {
font-weight: bold;
margin-right: 8px;
color: ;
}
Question 1 / 10
Next Question →
Your Score: / 10
Play Again
const quizData = [
{
q: "What does `display: flex` do in CSS?",
options: ["Arranges elements in a Grid", "Arranges elements in Row/Column", "Hides the element", "Does nothing"],
answer: 1
},
{
q: "What does `===` do in JavaScript?",
options: ["Checks only Value", "Checks both Value and Type", "Assigns a value", "Creates a comment"],
answer: 1
},
{
q: "In UI Design, what is a 'Hamburger Menu'?",
options: ["An icon with 3 horizontal lines", "A round button", "A search bar", "The footer"],
answer: 0
},
{
q: "How do you get the last element of a List in Python?",
options: ["list[0]", "list[-1]", "list[last]", "list.end()"],
answer: 1
},
{
q: "Which HTML tag is used to create a link?",
options: ["", "", "", ""],
answer: 1
},
{
q: "Which React Hook is used to update State?",
options: ["useEffect", "useState", "useContext", "useRef"],
answer: 1
},
{
q: "What does the 'F-Pattern' mean in UX?",
options: ["Font Style", "How users scan a webpage", "Footer Design", "Form Validation"],
answer: 1
},
{
q: "What is `z-index` used for in CSS?",
options: ["For zooming", "For controlling element layering", "For changing color", "For animation"],
answer: 1
},
{
q: "Which Git command creates a new branch?",
options: ["git new branch", "git branch", "git checkout -b", "git create branch"],
answer: 2
},
{
q: "Which attribute is best for accessibility on a Button?",
options: ["title", "aria-label", "class", "id"],
answer: 1
}
];
let currentQ = 0;
let score = 0;
function loadQuestion() {
document.getElementById('progress').innerText = `Question ${currentQ + 1} / 10`;
document.getElementById('question').innerText = quizData[currentQ].q;
const optionsDiv = document.getElementById('options');
optionsDiv.innerHTML = '';
quizData[currentQ].options.forEach((opt, index) => {
const btn = document.createElement('button');
// Added numbering here: 1. 2. 3. 4.
btn.innerHTML = `${index + 1}. ${opt}`;
btn.onclick = () => checkAnswer(btn, index);
optionsDiv.appendChild(btn);
});
document.getElementById('nextBtn').style.display = 'none';
}
function checkAnswer(btn, selected) {
const correct = quizData[currentQ].answer;
const allBtns = document.querySelectorAll('.options button');
allBtns.forEach(b => b.disabled = true);
if(selected === correct) {
btn.classList.add('correct');
score++;
} else {
btn.classList.add('wrong');
allBtns[correct].classList.add('correct');
}
document.getElementById('nextBtn').style.display = 'block';
}
function nextQuestion() {
currentQ++;
if(currentQ < quizData.length) {
loadQuestion();
} else {
showResult();
}
}
function showResult() {
document.getElementById('quiz-card').style.display = 'none';
document.getElementById('progress').style.display = 'none';
document.getElementById('result-card').style.display = 'block';
document.getElementById('score').innerText = score;
}
function restartQuiz() {
currentQ = 0;
score = 0;
document.getElementById('quiz-card').style.display = 'block';
document.getElementById('progress').style.display = 'block';
document.getElementById('result-card').style.display = 'none';
loadQuestion();
}
loadQuestion();
