+

+

BrainBoost Quiz

+

Test your knowledge and track your progress

+

+

+

+

+

+

+

+

Built with care by BrainBoost

+

+ buildHtml

+ baseUrl https://quiz.scroll.pub

+ metaTags

+ editButton /edit.html

+ title BrainBoost Quiz

+ style.css

+ body.html

+ script.js

+ {

+ "id": "msg_01MD5z1WRE79gnKiY7e85pns",

+ "type": "message",

+ "role": "assistant",

+ "model": "claude-3-5-sonnet-20241022",

+ "content": [

+ {

+ "type": "text",

+ "text": "I'll help create an interactive quiz website with MongoDB integration.\n\nSuggested domain: quiz.scroll.pub\n\n---domain---\nquiz.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://quiz.scroll.pub\nmetaTags\neditButton /edit.html\ntitle BrainBoost Quiz\nstyle.css\nbody.html\nscript.js\n---body.html---\n

\n

BrainBoost Quiz

\n

Test your knowledge and track your progress

\n

\n\n

\n

\n

\n

Ready to begin?

\n Start Quiz\n

\n\n

\n

\n

\n

\n

\n

\n

\n\n

\n

Quiz Complete!

\n

\n Your Score:\n 0\n

\n Try Again\n

\n

\n

\n\n\n---style.css---\n:root {\n --primary: #2a6bf2;\n --secondary: #1a1b4b;\n --accent: #4cd964;\n --background: #f8f9fa;\n --text: #2c3e50;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.6;\n color: var(--text);\n background: var(--background);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\nheader {\n background: var(--secondary);\n color: white;\n padding: 2rem;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n background: linear-gradient(45deg, var(--primary), var(--accent));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\nmain {\n flex: 1;\n padding: 2rem;\n max-width: 800px;\n margin: 0 auto;\n width: 100%;\n}\n\n.quiz-container {\n background: white;\n border-radius: 1rem;\n padding: 2rem;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);\n}\n\n.btn {\n background: var(--primary);\n color: white;\n border: none;\n padding: 1rem 2rem;\n border-radius: 0.5rem;\n font-size: 1.1rem;\n cursor: pointer;\n transition: transform 0.2s, background 0.2s;\n}\n\n.btn:hover {\n background: var(--accent);\n transform: translateY(-2px);\n}\n\n.hidden {\n display: none;\n}\n\n.active {\n display: block;\n}\n\n.progress-bar {\n height: 0.5rem;\n background: #eee;\n border-radius: 1rem;\n margin-bottom: 2rem;\n}\n\n#progress {\n height: 100%;\n background: var(--accent);\n border-radius: 1rem;\n width: 0;\n transition: width 0.3s ease;\n}\n\n.options-container {\n display: grid;\n gap: 1rem;\n margin: 2rem 0;\n}\n\n.option {\n background: #f1f3f5;\n padding: 1rem;\n border-radius: 0.5rem;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.option:hover {\n background: #e9ecef;\n transform: translateX(5px);\n}\n\n.selected {\n background: var(--primary);\n color: white;\n}\n\n.score-container {\n font-size: 2rem;\n text-align: center;\n margin: 2rem 0;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background: var(--secondary);\n color: white;\n}\n\n@media (max-width: 768px) {\n header {\n padding: 1rem;\n }\n\n h1 {\n font-size: 2rem;\n }\n\n main {\n padding: 1rem;\n }\n\n .quiz-container {\n padding: 1rem;\n }\n}\n---script.js---\nconst questions = [\n {\n question: \"What is the capital of France?\",\n options: [\"London\", \"Berlin\", \"Paris\", \"Madrid\"],\n correct: 2\n },\n {\n question: \"Which planet is closest to the Sun?\",\n options: [\"Venus\", \"Mercury\", \"Mars\", \"Earth\"],\n correct: 1\n },\n {\n question: \"What is 2 + 2?\",\n options: [\"3\", \"4\", \"5\", \"6\"],\n correct: 1\n }\n];\n\nlet currentQuestion = 0;\nlet score = 0;\n\nconst startBtn = document.getElementById('start-btn');\nconst retryBtn = document.getElementById('retry-btn');\nconst quizStart = document.getElementById('quiz-start');\nconst quizQuestions = document.getElementById('quiz-questions');\nconst quizResults = document.getElementById('quiz-results');\nconst questionEl = document.getElementById('question');\nconst optionsContainer = document.querySelector('.options-container');\nconst progressBar = document.getElementById('progress');\nconst scoreEl = document.getElementById('score');\n\nfunction startQuiz() {\n quizStart.classList.remove('active');\n quizStart.classList.add('hidden');\n quizQuestions.classList.remove('hidden');\n quizQuestions.classList.add('active');\n showQuestion();\n}\n\nfunction showQuestion() {\n const question = questions[currentQuestion];\n questionEl.textContent = question.question;\n optionsContainer.innerHTML = '';\n \n question.options.forEach((option, index) => {\n const button = document.createElement('button');\n button.classList.add('option');\n button.textContent = option;\n button.addEventListener('click', () => selectOption(index));\n optionsContainer.appendChild(button);\n });\n\n updateProgress();\n}\n\nfunction selectOption(index) {\n const options = document.querySelectorAll('.option');\n options.forEach(option => option.classList.remove('selected'));\n options[index].classList.add('selected');\n\n if (index === questions[currentQuestion].correct) {\n score++;\n }\n\n setTimeout(() => {\n currentQuestion++;\n \n if (currentQuestion < questions.length) {\n showQuestion();\n } else {\n showResults();\n }\n }, 500);\n}\n\nfunction updateProgress() {\n const progress = (currentQuestion / questions.length) * 100;\n progressBar.style.width = `${progress}%`;\n}\n\nfunction showResults() {\n quizQuestions.classList.remove('active');\n quizQuestions.classList.add('hidden');\n quizResults.classList.remove('hidden');\n quizResults.classList.add('active');\n scoreEl.textContent = `${score}/${questions.length}`;\n\n // Save results to MongoDB (would require backend integration)\n saveResults(score);\n}\n\nfunction resetQuiz() {\n currentQuestion = 0;\n score = 0;\n quizResults.classList.remove('active');\n quizResults.classList.add('hidden');\n quizStart.classList.remove('hidden');\n quizStart.classList.add('active');\n}\n\nfunction saveResults(score) {\n // This function would typically make an API call to your backend\n // to save the score in MongoDB\n console.log('Saving score:', score);\n}\n\nstartBtn.addEventListener('click', startQuiz);\nretryBtn.addEventListener('click', resetQuiz);\n---end---\n\nNote: This implementation includes the frontend portion of the quiz application. To actually save results to MongoDB, you would need to:\n\n1. Set up a backend server (e.g., Node.js with Express)\n2. Create a MongoDB connection\n3. Create an API endpoint to receive and store the scores\n4. Modify the saveResults() function to make an API call to your backend\n\nThe current implementation provides a complete interactive quiz interface with smooth animations, progress tracking, and a responsive design that works well on all devices."

+ }

+ ],

+ "stop_reason": "end_turn",

+ "stop_sequence": null,

+ "usage": {

+ "input_tokens": 283,

+ "cache_creation_input_tokens": 0,

+ "cache_read_input_tokens": 0,

+ "output_tokens": 2304

+ }

+ }

+ # quiz.scroll.pub

+ Website generated by Claude from prompt: I want an interactive quizlet that saves their results to mongodb

+ const questions = [

+ {

+ question: "What is the capital of France?",

+ options: ["London", "Berlin", "Paris", "Madrid"],

+ correct: 2

+ },

+ {

+ question: "Which planet is closest to the Sun?",

+ options: ["Venus", "Mercury", "Mars", "Earth"],

+ correct: 1

+ },

+ {

+ question: "What is 2 + 2?",

+ options: ["3", "4", "5", "6"],

+ correct: 1

+ }

+ ];

+

+ let currentQuestion = 0;

+ let score = 0;

+

+ const startBtn = document.getElementById('start-btn');

+ const retryBtn = document.getElementById('retry-btn');

+ const quizStart = document.getElementById('quiz-start');

+ const quizQuestions = document.getElementById('quiz-questions');

+ const quizResults = document.getElementById('quiz-results');

+ const questionEl = document.getElementById('question');

+ const optionsContainer = document.querySelector('.options-container');

+ const progressBar = document.getElementById('progress');

+ const scoreEl = document.getElementById('score');

+

+ function startQuiz() {

+ quizStart.classList.remove('active');

+ quizStart.classList.add('hidden');

+ quizQuestions.classList.remove('hidden');

+ quizQuestions.classList.add('active');

+ showQuestion();

+ }

+

+ function showQuestion() {

+ const question = questions[currentQuestion];

+ questionEl.textContent = question.question;

+ optionsContainer.innerHTML = '';

+

+ question.options.forEach((option, index) => {

+ const button = document.createElement('button');

+ button.classList.add('option');

+ button.textContent = option;

+ button.addEventListener('click', () => selectOption(index));

+ optionsContainer.appendChild(button);

+ });

+

+ updateProgress();

+ }

+

+ function selectOption(index) {

+ const options = document.querySelectorAll('.option');

+ options.forEach(option => option.classList.remove('selected'));

+ options[index].classList.add('selected');

+

+ if (index === questions[currentQuestion].correct) {

+ score++;

+ }

+

+ setTimeout(() => {

+ currentQuestion++;

+

+ if (currentQuestion < questions.length) {

+ showQuestion();

+ } else {

+ showResults();

+ }

+ }, 500);

+ }

+

+ function updateProgress() {

+ const progress = (currentQuestion / questions.length) * 100;

+ progressBar.style.width = `${progress}%`;

+ }

+

+ function showResults() {

+ quizQuestions.classList.remove('active');

+ quizQuestions.classList.add('hidden');

+ quizResults.classList.remove('hidden');

+ quizResults.classList.add('active');

+ scoreEl.textContent = `${score}/${questions.length}`;

+

+ // Save results to MongoDB (would require backend integration)

+ saveResults(score);

+ }

+

+ function resetQuiz() {

+ currentQuestion = 0;

+ score = 0;

+ quizResults.classList.remove('active');

+ quizResults.classList.add('hidden');

+ quizStart.classList.remove('hidden');

+ quizStart.classList.add('active');

+ }

+

+ function saveResults(score) {

+ // This function would typically make an API call to your backend

+ // to save the score in MongoDB

+ console.log('Saving score:', score);

+ }

+

+ startBtn.addEventListener('click', startQuiz);

+ retryBtn.addEventListener('click', resetQuiz);

+ :root {

+ --primary: #2a6bf2;

+ --secondary: #1a1b4b;

+ --accent: #4cd964;

+ --background: #f8f9fa;

+ --text: #2c3e50;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ }

+

+ body {

+ font-family: system-ui, -apple-system, sans-serif;

+ line-height: 1.6;

+ color: var(--text);

+ background: var(--background);

+ min-height: 100vh;

+ display: flex;

+ flex-direction: column;

+ }

+

+ header {

+ background: var(--secondary);

+ color: white;

+ padding: 2rem;

+ text-align: center;

+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

+ }

+

+ h1 {

+ font-size: 2.5rem;

+ margin-bottom: 0.5rem;

+ background: linear-gradient(45deg, var(--primary), var(--accent));

+ -webkit-background-clip: text;

+ -webkit-text-fill-color: transparent;

+ }

+

+ main {

+ flex: 1;

+ padding: 2rem;

+ max-width: 800px;

+ margin: 0 auto;

+ width: 100%;

+ }

+

+ .quiz-container {

+ background: white;

+ border-radius: 1rem;

+ padding: 2rem;

+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

+ }

+

+ .btn {

+ background: var(--primary);

+ color: white;

+ border: none;

+ padding: 1rem 2rem;

+ border-radius: 0.5rem;

+ font-size: 1.1rem;

+ cursor: pointer;

+ transition: transform 0.2s, background 0.2s;

+ }

+

+ .btn:hover {

+ background: var(--accent);

+ transform: translateY(-2px);

+ }

+

+ .hidden {

+ display: none;

+ }

+

+ .active {

+ display: block;

+ }

+

+ .progress-bar {

+ height: 0.5rem;

+ background: #eee;

+ border-radius: 1rem;

+ margin-bottom: 2rem;

+ }

+

+ #progress {

+ height: 100%;

+ background: var(--accent);

+ border-radius: 1rem;

+ width: 0;

+ transition: width 0.3s ease;

+ }

+

+ .options-container {

+ display: grid;

+ gap: 1rem;

+ margin: 2rem 0;

+ }

+

+ .option {

+ background: #f1f3f5;

+ padding: 1rem;

+ border-radius: 0.5rem;

+ cursor: pointer;

+ transition: all 0.2s;

+ }

+

+ .option:hover {

+ background: #e9ecef;

+ transform: translateX(5px);

+ }

+

+ .selected {

+ background: var(--primary);

+ color: white;

+ }

+

+ .score-container {

+ font-size: 2rem;

+ text-align: center;

+ margin: 2rem 0;

+ }

+

+ footer {

+ text-align: center;

+ padding: 1rem;

+ background: var(--secondary);

+ color: white;

+ }

+

+ @media (max-width: 768px) {

+ header {

+ padding: 1rem;

+ }

+

+ h1 {

+ font-size: 2rem;

+ }

+

+ main {

+ padding: 1rem;

+ }

+

+ .quiz-container {

+ padding: 1rem;

+ }

+ }