c9ai
Version:
Universal AI assistant with vibe-based workflows, hybrid cloud+local AI, and comprehensive tool integration
562 lines (456 loc) • 22.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frontend Stack Quiz - FRONTEND (intermediate)</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.quiz-container {
max-width: 800px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.quiz-header {
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
color: white;
padding: 30px;
text-align: center;
}
.quiz-header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
.quiz-header p {
font-size: 1.2em;
opacity: 0.9;
}
.quiz-content {
padding: 40px;
}
.question-container {
display: none;
animation: fadeIn 0.5s ease-in;
}
.question-container.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.question-number {
color: #667eea;
font-size: 0.9em;
font-weight: bold;
margin-bottom: 10px;
}
.question {
font-size: 1.3em;
color: #333;
margin-bottom: 30px;
line-height: 1.5;
}
.options {
list-style: none;
}
.option {
margin-bottom: 15px;
}
.option input[type="radio"] {
display: none;
}
.option label {
display: block;
padding: 20px;
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1em;
}
.option label:hover {
background: #e3f2fd;
border-color: #2196f3;
}
.option input[type="radio"]:checked + label {
background: #4CAF50;
color: white;
border-color: #4CAF50;
}
.option.correct label {
background: #4CAF50 ;
color: white;
border-color: #4CAF50;
}
.option.incorrect label {
background: #f44336 ;
color: white;
border-color: #f44336;
}
.explanation {
background: #fff3cd;
border: 1px solid #ffeeba;
border-radius: 8px;
padding: 15px;
margin-top: 20px;
display: none;
}
.explanation.show {
display: block;
animation: fadeIn 0.5s ease-in;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 40px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}
.btn {
padding: 15px 30px;
border: none;
border-radius: 8px;
font-size: 1.1em;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5a67d8;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #545b62;
}
.btn:disabled {
background: #ccc;
cursor: not-allowed;
}
.progress-bar {
width: 100%;
height: 6px;
background: #e9ecef;
border-radius: 3px;
margin-bottom: 20px;
}
.progress {
height: 100%;
background: linear-gradient(90deg, #4ECDC4, #44A08D);
border-radius: 3px;
transition: width 0.3s ease;
}
.quiz-results {
display: none;
text-align: center;
padding: 40px;
}
.score {
font-size: 3em;
font-weight: bold;
color: #4CAF50;
margin-bottom: 20px;
}
.score.poor { color: #f44336; }
.score.average { color: #ff9800; }
.score.good { color: #4CAF50; }
.score-message {
font-size: 1.3em;
color: #666;
margin-bottom: 30px;
}
.restart-btn {
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
color: white;
padding: 15px 40px;
border: none;
border-radius: 25px;
font-size: 1.2em;
cursor: pointer;
transition: transform 0.3s ease;
}
.restart-btn:hover {
transform: translateY(-2px);
}
</style>
</head>
<body>
<div class="quiz-container">
<div class="quiz-header">
<h1>🚀 Frontend Stack Quiz</h1>
<p>FRONTEND - INTERMEDIATE Level</p>
</div>
<div class="quiz-content">
<div class="progress-bar">
<div class="progress" style="width: 0%"></div>
</div>
<div class="question-container active" data-question="0">
<div class="question-number">Question 1 of 5</div>
<div class="question">What is the virtual DOM in React?</div>
<ul class="options">
<li class="option">
<input type="radio" id="q0_opt0" name="question0" value="0">
<label for="q0_opt0">A copy of the real DOM stored in memory</label>
</li>
<li class="option">
<input type="radio" id="q0_opt1" name="question0" value="1">
<label for="q0_opt1">A new HTML specification</label>
</li>
<li class="option">
<input type="radio" id="q0_opt2" name="question0" value="2">
<label for="q0_opt2">A browser API</label>
</li>
<li class="option">
<input type="radio" id="q0_opt3" name="question0" value="3">
<label for="q0_opt3">A CSS framework</label>
</li>
</ul>
<div class="explanation">
<strong>Explanation:</strong> The virtual DOM is React's representation of the real DOM kept in memory and synced with the real DOM through reconciliation.
</div>
<div class="navigation">
<button class="btn btn-secondary" onclick="prevQuestion()" style="visibility: hidden">Previous</button>
<button class="btn btn-primary" onclick="nextQuestion()" id="nextBtn0">Next Question</button>
</div>
</div>
<div class="question-container " data-question="1">
<div class="question-number">Question 2 of 5</div>
<div class="question">Which CSS methodology follows the Block, Element, Modifier naming convention?</div>
<ul class="options">
<li class="option">
<input type="radio" id="q1_opt0" name="question1" value="0">
<label for="q1_opt0">SMACSS</label>
</li>
<li class="option">
<input type="radio" id="q1_opt1" name="question1" value="1">
<label for="q1_opt1">BEM</label>
</li>
<li class="option">
<input type="radio" id="q1_opt2" name="question1" value="2">
<label for="q1_opt2">OOCSS</label>
</li>
<li class="option">
<input type="radio" id="q1_opt3" name="question1" value="3">
<label for="q1_opt3">ITCSS</label>
</li>
</ul>
<div class="explanation">
<strong>Explanation:</strong> BEM (Block, Element, Modifier) is a CSS naming methodology that helps create reusable components.
</div>
<div class="navigation">
<button class="btn btn-secondary" onclick="prevQuestion()" >Previous</button>
<button class="btn btn-primary" onclick="nextQuestion()" id="nextBtn1">Next Question</button>
</div>
</div>
<div class="question-container " data-question="2">
<div class="question-number">Question 3 of 5</div>
<div class="question">What is the purpose of webpack in modern frontend development?</div>
<ul class="options">
<li class="option">
<input type="radio" id="q2_opt0" name="question2" value="0">
<label for="q2_opt0">Database management</label>
</li>
<li class="option">
<input type="radio" id="q2_opt1" name="question2" value="1">
<label for="q2_opt1">Module bundling and build automation</label>
</li>
<li class="option">
<input type="radio" id="q2_opt2" name="question2" value="2">
<label for="q2_opt2">Server-side rendering</label>
</li>
<li class="option">
<input type="radio" id="q2_opt3" name="question2" value="3">
<label for="q2_opt3">API testing</label>
</li>
</ul>
<div class="explanation">
<strong>Explanation:</strong> Webpack is a module bundler that processes and bundles JavaScript files and other assets for web applications.
</div>
<div class="navigation">
<button class="btn btn-secondary" onclick="prevQuestion()" >Previous</button>
<button class="btn btn-primary" onclick="nextQuestion()" id="nextBtn2">Next Question</button>
</div>
</div>
<div class="question-container " data-question="3">
<div class="question-number">Question 4 of 5</div>
<div class="question">In JavaScript, what does 'hoisting' refer to?</div>
<ul class="options">
<li class="option">
<input type="radio" id="q3_opt0" name="question3" value="0">
<label for="q3_opt0">Moving variables to the top of their scope during compilation</label>
</li>
<li class="option">
<input type="radio" id="q3_opt1" name="question3" value="1">
<label for="q3_opt1">Lifting heavy objects</label>
</li>
<li class="option">
<input type="radio" id="q3_opt2" name="question3" value="2">
<label for="q3_opt2">Increasing performance</label>
</li>
<li class="option">
<input type="radio" id="q3_opt3" name="question3" value="3">
<label for="q3_opt3">Creating new functions</label>
</li>
</ul>
<div class="explanation">
<strong>Explanation:</strong> Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their containing scope during compilation.
</div>
<div class="navigation">
<button class="btn btn-secondary" onclick="prevQuestion()" >Previous</button>
<button class="btn btn-primary" onclick="nextQuestion()" id="nextBtn3">Next Question</button>
</div>
</div>
<div class="question-container " data-question="4">
<div class="question-number">Question 5 of 5</div>
<div class="question">What is the difference between '==' and '===' in JavaScript?</div>
<ul class="options">
<li class="option">
<input type="radio" id="q4_opt0" name="question4" value="0">
<label for="q4_opt0">No difference</label>
</li>
<li class="option">
<input type="radio" id="q4_opt1" name="question4" value="1">
<label for="q4_opt1">=== checks type and value, == only checks value</label>
</li>
<li class="option">
<input type="radio" id="q4_opt2" name="question4" value="2">
<label for="q4_opt2">== is faster than ===</label>
</li>
<li class="option">
<input type="radio" id="q4_opt3" name="question4" value="3">
<label for="q4_opt3">=== is deprecated</label>
</li>
</ul>
<div class="explanation">
<strong>Explanation:</strong> === (strict equality) checks both type and value, while == (loose equality) performs type coercion before comparison.
</div>
<div class="navigation">
<button class="btn btn-secondary" onclick="prevQuestion()" >Previous</button>
<button class="btn btn-primary" onclick="nextQuestion()" id="nextBtn4">Finish Quiz</button>
</div>
</div>
<div class="quiz-results" id="quizResults">
<div class="score" id="finalScore">0%</div>
<div class="score-message" id="scoreMessage">Loading...</div>
<button class="restart-btn" onclick="restartQuiz()">Take Quiz Again</button>
</div>
</div>
</div>
<script>
const quizData = [{"question":"What is the virtual DOM in React?","options":["A copy of the real DOM stored in memory","A new HTML specification","A browser API","A CSS framework"],"correct":0,"explanation":"The virtual DOM is React's representation of the real DOM kept in memory and synced with the real DOM through reconciliation."},{"question":"Which CSS methodology follows the Block, Element, Modifier naming convention?","options":["SMACSS","BEM","OOCSS","ITCSS"],"correct":1,"explanation":"BEM (Block, Element, Modifier) is a CSS naming methodology that helps create reusable components."},{"question":"What is the purpose of webpack in modern frontend development?","options":["Database management","Module bundling and build automation","Server-side rendering","API testing"],"correct":1,"explanation":"Webpack is a module bundler that processes and bundles JavaScript files and other assets for web applications."},{"question":"In JavaScript, what does 'hoisting' refer to?","options":["Moving variables to the top of their scope during compilation","Lifting heavy objects","Increasing performance","Creating new functions"],"correct":0,"explanation":"Hoisting is JavaScript's behavior of moving variable and function declarations to the top of their containing scope during compilation."},{"question":"What is the difference between '==' and '===' in JavaScript?","options":["No difference","=== checks type and value, == only checks value","== is faster than ===","=== is deprecated"],"correct":1,"explanation":"=== (strict equality) checks both type and value, while == (loose equality) performs type coercion before comparison."}];
let currentQuestion = 0;
let userAnswers = [];
let score = 0;
function updateProgress() {
const progress = ((currentQuestion + 1) / quizData.length) * 100;
document.querySelector('.progress').style.width = progress + '%';
}
function nextQuestion() {
const selectedOption = document.querySelector('input[name="question' + currentQuestion + '"]:checked');
if (!selectedOption) {
alert('Please select an answer before proceeding.');
return;
}
const selectedValue = parseInt(selectedOption.value);
userAnswers[currentQuestion] = selectedValue;
// Show correct/incorrect styling and explanation
const currentContainer = document.querySelector('[data-question="' + currentQuestion + '"]');
const options = currentContainer.querySelectorAll('.option');
const correctIndex = quizData[currentQuestion].correct;
options.forEach((option, index) => {
const input = option.querySelector('input');
if (index === correctIndex) {
option.classList.add('correct');
} else if (input.checked && index !== correctIndex) {
option.classList.add('incorrect');
}
input.disabled = true;
});
currentContainer.querySelector('.explanation').classList.add('show');
setTimeout(() => {
if (currentQuestion < quizData.length - 1) {
currentContainer.classList.remove('active');
currentQuestion++;
document.querySelector('[data-question="' + currentQuestion + '"]').classList.add('active');
updateProgress();
} else {
showResults();
}
}, 2000);
}
function prevQuestion() {
if (currentQuestion > 0) {
document.querySelector('[data-question="' + currentQuestion + '"]').classList.remove('active');
currentQuestion--;
document.querySelector('[data-question="' + currentQuestion + '"]').classList.add('active');
updateProgress();
}
}
function showResults() {
score = userAnswers.reduce((total, answer, index) => {
return total + (answer === quizData[index].correct ? 1 : 0);
}, 0);
const percentage = Math.round((score / quizData.length) * 100);
document.querySelector('.quiz-content .question-container.active').style.display = 'none';
document.getElementById('quizResults').style.display = 'block';
document.getElementById('finalScore').textContent = percentage + '%';
const scoreElement = document.getElementById('finalScore');
const messageElement = document.getElementById('scoreMessage');
if (percentage >= 80) {
scoreElement.className = 'score good';
messageElement.textContent = 'Excellent! You got ' + score + ' out of ' + quizData.length + ' questions correct. You have a strong understanding of frontend development!';
} else if (percentage >= 60) {
scoreElement.className = 'score average';
messageElement.textContent = 'Good job! You got ' + score + ' out of ' + quizData.length + ' questions correct. Keep learning to improve your skills!';
} else {
scoreElement.className = 'score poor';
messageElement.textContent = 'You got ' + score + ' out of ' + quizData.length + ' questions correct. Don't worry, keep practicing and you'll improve!';
}
}
function restartQuiz() {
currentQuestion = 0;
userAnswers = [];
score = 0;
// Reset all questions
document.querySelectorAll('.question-container').forEach((container, index) => {
container.style.display = index === 0 ? 'block' : 'none';
container.classList.toggle('active', index === 0);
// Reset options
container.querySelectorAll('.option').forEach(option => {
option.classList.remove('correct', 'incorrect');
const input = option.querySelector('input');
input.checked = false;
input.disabled = false;
});
// Hide explanations
container.querySelector('.explanation').classList.remove('show');
});
document.getElementById('quizResults').style.display = 'none';
updateProgress();
}
// Initialize
updateProgress();
</script>
</body>
</html>