Untitled
unknown
plain_text
a month ago
12 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Algebra 2 Final Review Quiz</title>
<style>
:root {
--primary: #4f46e5;
--primary-hover: #4338ca;
--bg: #f8fafc;
--card-bg: #ffffff;
--text: #1e293b;
--text-light: #64748b;
--success: #22c55e;
--error: #ef4444;
--border: #e2e8f0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg);
color: var(--text);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.quiz-container {
background-color: var(--card-bg);
border-radius: 16px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
padding: 32px;
box-sizing: border-box;
transition: all 0.3s ease;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
border-bottom: 2px solid var(--border);
padding-bottom: 16px;
}
.title {
font-size: 20px;
font-weight: 700;
color: var(--primary);
margin: 0;
}
.progress {
font-size: 14px;
color: var(--text-light);
font-weight: 600;
background: var(--border);
padding: 4px 12px;
border-radius: 20px;
}
.question-box {
margin-bottom: 24px;
}
.question-text {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 16px;
}
.options-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.option-btn {
background-color: var(--card-bg);
border: 2px solid var(--border);
border-radius: 8px;
padding: 14px 20px;
font-size: 16px;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
color: var(--text);
}
.option-btn:hover:not(:disabled) {
border-color: var(--primary);
background-color: #f5f3ff;
}
.option-btn:disabled {
cursor: not-allowed;
}
.option-btn.correct {
background-color: #dcfce7;
border-color: var(--success);
color: #166534;
}
.option-btn.wrong {
background-color: #fee2e2;
border-color: var(--error);
color: #991b1b;
}
.feedback {
margin-top: 20px;
padding: 16px;
border-radius: 8px;
font-weight: 500;
display: none;
line-height: 1.4;
}
.feedback.correct {
display: block;
background-color: #f0fdf4;
color: #15803d;
border-left: 4px solid var(--success);
}
.feedback.wrong {
display: block;
background-color: #fef2f2;
color: #b91c1c;
border-left: 4px solid var(--error);
}
.next-btn {
margin-top: 24px;
width: 100%;
background-color: var(--primary);
color: white;
border: none;
border-radius: 8px;
padding: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
display: none;
}
.next-btn:hover {
background-color: var(--primary-hover);
}
.results-screen {
text-align: center;
display: none;
}
.score-display {
font-size: 48px;
font-weight: 800;
color: var(--primary);
margin: 20px 0;
}
.restart-btn {
background-color: var(--primary);
color: white;
border: none;
border-radius: 8px;
padding: 14px 28px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.restart-btn:hover {
background-color: var(--primary-hover);
}
</style>
</head>
<body>
<div class="quiz-container">
<div id="quiz-screen">
<div class="header">
<h1 class="title">Algebra 2 Review</h1>
<span class="progress" id="progress-text">Question 1/5</span>
</div>
<div class="question-box">
<div class="question-text" id="question-text">Loading question...</div>
<div class="options-list" id="options-container">
</div>
</div>
<div class="feedback" id="feedback-box"></div>
<button class="next-btn" id="next-button" onclick="nextQuestion()">Next Question</button>
</div>
<div id="results-screen" class="results-screen">
<h1 class="title" style="font-size: 28px;">Quiz Completed!</h1>
<div class="score-display" id="score-text">0/0</div>
<p id="performance-comment" style="color: var(--text-light); margin-bottom: 24px; font-size: 18px;"></p>
<button class="restart-btn" onclick="restartQuiz()">Restart Quiz</button>
</div>
</div>
<script>
// Quiz data sourced from Final Review content
const quizData = [
{
question: "Simplify the expression: (3x²y⁰)⁻³",
options: [
"1 / (27x⁶)",
"27x⁶",
"1 / (9x⁶y³)",
"-9x⁶"
],
correct: 0,
explanation: "Remember that y⁰ = 1. Then apply the negative exponent rule to the rest: (3x²)⁻³ = 1 / (3x³)³ = 1 / (27x⁶)."
},
{
question: "Branson runs a 5K (3.1 miles) in 22 minutes. Let T(d) represent his time in minutes as a function of distance d in miles. What is the domain of T?",
options: [
"0 ≤ T(d) ≤ 22",
"0 ≤ d ≤ 3.1",
"d ≥ 0",
"All real numbers"
],
correct: 1,
explanation: "The domain is the set of all possible input values (distance). Branson starts at 0 miles and finishes at 3.1 miles, so the domain is 0 ≤ d ≤ 3.1."
},
{
question: "Find the vertex of the quadratic function: f(x) = 2x² - 8x + 6",
options: [
"(-2, 30)",
"(4, 6)",
"(2, -2)",
"(-2, -2)"
],
correct: 2,
explanation: "Use x = -b / (2a) to find the x-coordinate of the vertex: x = -(-8) / (2 * 2) = 8 / 4 = 2. Plug x = 2 back into the equation: f(2) = 2(2)² - 8(2) + 6 = 8 - 16 + 6 = -2. So, the vertex is (2, -2)."
},
{
question: "A company's weekly profit function has x-intercepts at (12, 0) and (510, 0). What do these intercepts represent?",
options: [
"The maximum profit the company can make is $510.",
"When the company sells 12 or 510 pieces of candy, its profit is $0.",
"The company must sell between 12 and 510 pieces to avoid losing money.",
"The initial launch costs are $12."
],
correct: 1,
explanation: "An x-intercept is where the output (y-value, or profit) equals 0. Therefore, selling 12 or 510 pieces results in exactly $0 of profit."
},
{
question: "If f(x) = 3 - 2x, find its inverse function f⁻¹(x).",
options: [
"f⁻¹(x) = (3 - x) / 2",
"f⁻¹(x) = 2x - 3",
"f⁻¹(x) = (x - 3) / 2",
"f⁻¹(x) = -2x + 3"
],
correct: 0,
explanation: "Set y = 3 - 2x. Swap x and y: x = 3 - 2y. Solve for y: x - 3 = -2y, which simplifies to y = (3 - x) / 2."
}
];
let currentQuestionIndex = 0;
let score = 0;
const quizScreen = document.getElementById('quiz-screen');
const resultsScreen = document.getElementById('results-screen');
const questionText = document.getElementById('question-text');
const optionsContainer = document.getElementById('options-container');
const progressText = document.getElementById('progress-text');
const feedbackBox = document.getElementById('feedback-box');
const nextButton = document.getElementById('next-button');
const scoreText = document.getElementById('score-text');
const performanceComment = document.getElementById('performance-comment');
function loadQuestion() {
// Reset element states
feedbackBox.className = 'feedback';
feedbackBox.style.display = 'none';
nextButton.style.display = 'none';
optionsContainer.innerHTML = '';
const currentQuestion = quizData[currentQuestionIndex];
// Update texts
progressText.innerText = `Question ${currentQuestionIndex + 1}/${quizData.length}`;
questionText.innerText = currentQuestion.question;
// Generate option buttons
currentQuestion.options.forEach((option, index) => {
const button = document.createElement('button');
button.className = 'option-btn';
button.innerText = option;
button.onclick = () => selectOption(index);
optionsContainer.appendChild(button);
});
}
function selectOption(selectedIndex) {
const currentQuestion = quizData[currentQuestionIndex];
const buttons = optionsContainer.getElementsByClassName('option-btn');
// Disable all buttons after choice
for (let i = 0; i < buttons.length; i++) {
buttons[i].disabled = true;
if (i === currentQuestion.correct) {
buttons[i].classList.add('correct');
}
}
if (selectedIndex === currentQuestion.correct) {
score++;
feedbackBox.innerText = "Correct! " + currentQuestion.explanation;
feedbackBox.className = "feedback correct";
} else {
buttons[selectedIndex].classList.add('wrong');
feedbackBox.innerText = "Incorrect. " + currentQuestion.explanation;
feedbackBox.className = "feedback wrong";
}
nextButton.style.style = 'block';
nextButton.style.display = 'block';
}
function nextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex < quizData.length) {
loadQuestion();
} else {
showResults();
}
}
function showResults() {
quizScreen.style.display = 'none';
resultsScreen.style.display = 'block';
scoreText.innerText = `${score} / ${quizData.length}`;
let comment = "";
const percentage = (score / quizData.length) * 100;
if (percentage === 100) comment = "Perfect score! You are fully prepared!";
else if (percentage >= 80) comment = "Great job! Just a little more review and you're set.";
else if (percentage >= 50) comment = "Good effort, but it's worth re-reading your formula notes.";
else comment = "Keep studying! Try taking the quiz again.";
performanceComment.innerText = comment;
}
function restartQuiz() {
score = 0;
currentQuestionIndex = 0;
resultsScreen.style.display = 'none';
quizScreen.style.display = 'block';
loadQuestion();
}
// Initialize the quiz on load
window.onload = loadQuestion;
</script>
</body>
</html>
Editor is loading...
Leave a Comment