Futuristic Quiz App
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #e0f7fa, #d1c4e9);
color: #4a148c;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.quiz-box {
background: rgba(255, 255, 255, 0.9);
border: 2px solid #7e57c2;
backdrop-filter: blur(8px);
padding: 30px;
border-radius: 20px;
max-width: 700px;
width: 90%;
box-shadow: 0 0 30px rgba(126, 87, 194, 0.4);
margin-bottom: 20px;
}
h1, h2, .question {
color: #4a148c;
}
.question {
font-size: 20px;
margin-bottom: 10px;
}
.options {
margin-bottom: 20px;
}
.options label {
display: block;
background: #ede7f6;
padding: 12px 16px;
border-radius: 12px;
cursor: pointer;
transition: background 0.3s ease;
margin-bottom: 10px;
color: #4a148c;
}
.options label:hover {
background: #d1c4e9;
}
.options input[type="checkbox"] {
margin-right: 10px;
accent-color: #7e57c2;
}
button {
width: 100%;
background-color: #7e57c2;
border: none;
color: white;
padding: 12px;
font-size: 18px;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s ease;
margin-top: 20px;
}
button:hover {
background-color: #5e35b1;
}
.result {
text-align: center;
font-size: 20px;
margin-top: 20px;
color: #4a148c;
}
.history {
background: #ede7f6;
border: 1px solid #7e57c2;
padding: 20px;
border-radius: 10px;
width: 90%;
max-width: 700px;
margin-top: 20px;
color: #4a148c;
}
.history-item {
margin-bottom: 10px;
padding: 10px;
background: #d1c4e9;
border-radius: 8px;
}
Futuristic Quiz Interface
const quizName = "Futuristic Quiz Interface";
const quizData = [
{ question: "What is the capital of France?", options: ["Paris", "London", "Berlin", "Madrid"], answer: 0 },
{ question: "Which language is used for web apps?", options: ["PHP", "Python", "JavaScript", "All"], answer: 3 },
{ question: "HTML stands for?", options: ["Hyper Trainer Marking Language", "Hyper Text Markup Language", "Hyper Text Marketing Language", "Hyper Text Mark Language"], answer: 1 },
{ question: "HTML stands for?", options: ["Hyper Trainer Marking Language", "Hyper Text Markup Language", "Hyper Text Marketing Language", "Hyper Text Mark Language"], answer: 1 },
{ question: "CSS is used for?", options: ["Styling", "Structure", "Scripting", "Storage"], answer: 0 }
];
function startQuiz() {
const quizContainer = document.getElementById("quiz");
quizContainer.innerHTML = "";
quizData.forEach((q, index) => {
const questionBlock = document.createElement("div");
questionBlock.classList.add("question-block");
questionBlock.innerHTML = `
${index + 1}. ${q.question}
`;
quizContainer.appendChild(questionBlock);
});
}
function handleToggle(clickedInput, groupName) {
const allInputs = document.querySelectorAll(`input[name='${groupName}']`);
allInputs.forEach(input => {
if (input !== clickedInput) input.checked = false;
});
}
function submitQuiz() {
let score = 0;
let correctCount = 0;
let wrongCount = 0;
let unattemptedCount = 0;
let correctQuestions = [];
let wrongQuestions = [];
let unattemptedQuestions = [];
quizData.forEach((q, index) => {
const selectedInputs = document.querySelectorAll(`input[name='q${index}']`);
const checkedInput = [...selectedInputs].find(input => input.checked);
if (!checkedInput) {
score -= 1;
unattemptedCount++;
unattemptedQuestions.push(index + 1);
} else if (parseInt(checkedInput.value) === q.answer) {
score += 4;
correctCount++;
correctQuestions.push(index + 1);
} else {
score -= 5;
wrongCount++;
wrongQuestions.push(index + 1);
}
});
const result = {
quizName,
score,
correct: correctCount,
wrong: wrongCount,
unattempted: unattemptedCount,
correctQuestions,
wrongQuestions,
unattemptedQuestions,
timestamp: new Date().toLocaleString()
};
const history = JSON.parse(localStorage.getItem("quizHistory")) || [];
history.unshift(result);
localStorage.setItem("quizHistory", JSON.stringify(history));
const totalMarks = quizData.length * 4;
const percentage = ((score / totalMarks) * 100).toFixed(2);
document.getElementById("result").innerHTML = `
${quizName}
Your Score: ${score}
Percentage: ${percentage}%
✅ Correct: ${correctCount} (Questions: ${correctQuestions.join(', ')})
❌ Wrong: ${wrongCount} (Questions: ${wrongQuestions.join(', ')})
⚠️ Unattempted: ${unattemptedCount} (Questions: ${unattemptedQuestions.join(', ')})
`;
}
function viewHistory() {
const history = JSON.parse(localStorage.getItem("quizHistory")) || [];
const container = document.getElementById("history");
container.innerHTML = "Quiz History
" +
history.map(entry => `
${entry.quizName}
${entry.timestamp}
🧮 Final Score: ${entry.score}
✅ Correct: ${entry.correct} (Questions: ${entry.correctQuestions.join(', ')})
❌ Wrong: ${entry.wrong} (Questions: ${entry.wrongQuestions.join(', ')})
⚠️ Unattempted: ${entry.unattempted} (Questions: ${entry.unattemptedQuestions.join(', ')})
`).join("");
}
function clearHistory() {
localStorage.removeItem("quizHistory");
document.getElementById("history").innerHTML = "Quiz History
Futuristic Quiz Interface
${entry.timestamp}
🧮 Final Score: ${entry.score}
✅ Correct: ${entry.correct} (Questions: ${entry.correctQuestions.join(', ')})
❌ Wrong: ${entry.wrong} (Questions: ${entry.wrongQuestions.join(', ')})
⚠️ Unattempted: ${entry.unattempted} (Questions: ${entry.unattemptedQuestions.join(', ')})
No records found.
"; }