brainrotscript
Version:
🧠 A brainrot programming language that compiles to JavaScript - because why write normal code when you can write code that's absolutely sending you? 💀
317 lines (274 loc) • 9.41 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🧠 Brainrot Quiz - Test Your Knowledge</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;
color: white;
overflow-x: hidden;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.quiz-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
h1 {
text-align: center;
margin-bottom: 30px;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.start-screen {
text-align: center;
}
.start-button {
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
border: none;
border-radius: 15px;
padding: 20px 40px;
color: white;
font-size: 1.3rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.start-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}
.question-screen {
display: none;
}
.progress-bar {
width: 100%;
height: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
margin-bottom: 30px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #ff6b6b, #feca57, #48ca7e);
border-radius: 5px;
transition: width 0.5s ease;
width: 0%;
}
.question-number {
text-align: center;
margin-bottom: 20px;
font-size: 1.1rem;
opacity: 0.8;
}
.question {
font-size: 1.4rem;
margin-bottom: 30px;
text-align: center;
line-height: 1.6;
}
.answers {
display: grid;
gap: 15px;
}
.answer-button {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 15px;
padding: 20px;
color: white;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
text-align: left;
}
.answer-button:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateX(10px);
border-color: rgba(255, 255, 255, 0.5);
}
.answer-button.selected {
background: linear-gradient(45deg, #48ca7e, #56ab2f);
border-color: #48ca7e;
}
.results-screen {
display: none;
text-align: center;
}
.score-display {
font-size: 3rem;
margin: 30px 0;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.score-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 30px 0;
}
.score-card {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.score-card.correct {
border-color: #48ca7e;
}
.score-card.wrong {
border-color: #ff6b6b;
}
.review-dropdown {
margin-top: 30px;
}
.review-button {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 10px;
padding: 15px;
color: white;
font-size: 1.1rem;
cursor: pointer;
width: 100%;
text-align: left;
transition: all 0.3s ease;
}
.review-button:hover {
background: rgba(255, 255, 255, 0.2);
}
.review-content {
display: none;
margin-top: 20px;
max-height: 400px;
overflow-y: auto;
}
.review-item {
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
padding: 15px;
margin-bottom: 15px;
border-left: 4px solid #667eea;
}
.review-item.correct {
border-left-color: #48ca7e;
}
.review-item.wrong {
border-left-color: #ff6b6b;
}
.review-question {
font-weight: bold;
margin-bottom: 10px;
}
.review-answer {
margin: 5px 0;
font-size: 0.95rem;
}
.restart-button {
background: linear-gradient(45deg, #667eea, #764ba2);
border: none;
border-radius: 15px;
padding: 15px 30px;
color: white;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
}
.restart-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}
/* Animations */
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.slide-in {
animation: slideIn 0.5s ease-out;
}
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
} */
</style>
</head>
<body>
<div class="container">
<div class="quiz-container">
<!-- Start Screen -->
<div class="start-screen" id="startScreen">
<h1>🧠 The Ultimate Brainrot Quiz</h1>
<p style="font-size: 1.2rem; margin-bottom: 20px;">Think you know your brainrot? Let's find out!</p>
<p style="opacity: 0.8;">20 questions to test if you're absolutely sending it 💀</p>
<button class="start-button" onclick="startQuiz()">Start Quiz 🔥</button>
</div>
<!-- Question Screen -->
<div class="question-screen" id="questionScreen">
<div class="progress-bar">
<div class="progress-fill" id="progressFill"></div>
</div>
<div class="question-number" id="questionNumber">Question 1 of 20</div>
<div class="question" id="questionText"></div>
<div class="answers" id="answersContainer"></div>
</div>
<!-- Results Screen -->
<div class="results-screen" id="resultsScreen">
<h1>🎉 Quiz Complete!</h1>
<div class="score-display" id="scoreDisplay"></div>
<div class="score-details">
<div class="score-card correct">
<h3>✅ Correct</h3>
<p style="font-size: 2rem;" id="correctCount">0</p>
</div>
<div class="score-card wrong">
<h3>❌ Wrong</h3>
<p style="font-size: 2rem;" id="wrongCount">0</p>
</div>
</div>
<div class="review-dropdown">
<button class="review-button" onclick="toggleReview()">
📋 Review All Questions ▼
</button>
<div class="review-content" id="reviewContent"></div>
</div>
<button class="restart-button" onclick="restartQuiz()">Take Quiz Again 🔄</button>
</div>
</div>
</div>
<!-- Load the external JavaScript file -->
<script src="js/quiz.js"></script>
</body>
</html>