{"name":"Javascript Demo Site","description":"Demo of using Javascript for interactivity on a website. This website is a trivia game!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/tjl3ixga219un3yjg3e0","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2025-10-26T03:44:01.419926Z","updated_at":"2025-10-26T03:44:01.419927Z","user_id":70,"status":"PRIVATE","parent_id":10318,"id":10319,"user":{"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active","photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200},"code":{"script.js":"const questions = [\n {\n question: \"What is the capital of France?\",\n answers: [\"Paris\", \"London\", \"Berlin\", \"Madrid\"],\n correct: \"Paris\"\n },\n {\n question: \"Which planet is known as the Red Planet?\",\n answers: [\"Venus\", \"Mars\", \"Jupiter\", \"Mercury\"],\n correct: \"Mars\"\n },\n {\n question: \"How many continents are there on Earth?\",\n answers: [\"5\", \"6\", \"7\", \"8\"],\n correct: \"7\"\n },\n {\n question: \"What gas do plants breathe in that humans and animals breathe out?\",\n answers: [\"Oxygen\", \"Hydrogen\", \"Carbon Dioxide\", \"Nitrogen\"],\n correct: \"Carbon Dioxide\"\n },\n {\n question: \"Which ocean is the largest?\",\n answers: [\"Atlantic\", \"Indian\", \"Pacific\", \"Arctic\"],\n correct: \"Pacific\"\n }\n];\n\nconst questionEl = document.getElementById(\"question\");\nconst answerButtons = document.getElementById(\"answer-buttons\");\nconst scoreEl = document.getElementById(\"score\");\nconst highScoreEl = document.getElementById(\"high-score\");\nconst nextBtn = document.getElementById(\"next-btn\");\nconst playAgainBtn = document.getElementById(\"play-again-btn\");\nconst clearHighScoreBtn = document.getElementById(\"clear-high-score-btn\");\n\nlet currentQuestionIndex = 0;\nlet score = 0;\nlet highScore = parseInt(localStorage.getItem(\"highScore\")) || 0;\nhighScoreEl.textContent = `High Score: ${highScore}`;\n\nfunction startQuiz() {\n score = 0;\n currentQuestionIndex = 0;\n scoreEl.textContent = `Score: ${score}`;\n showQuestion();\n}\n\nfunction showQuestion() {\n resetState();\n const current = questions[currentQuestionIndex];\n questionEl.textContent = current.question;\n\n current.answers.forEach(answer => {\n const button = document.createElement(\"button\");\n button.textContent = answer;\n button.addEventListener(\"click\", () => selectAnswer(answer, button));\n answerButtons.appendChild(button);\n });\n}\n\nfunction resetState() {\n answerButtons.innerHTML = \"\";\n nextBtn.style.display = \"none\";\n}\n\nfunction selectAnswer(selected, button) {\n const correct = questions[currentQuestionIndex].correct;\n\n // disable all buttons\n Array.from(answerButtons.children).forEach(btn => btn.disabled = true);\n\n if (selected === correct) {\n score += 10;\n button.classList.add(\"correct\");\n } else {\n button.classList.add(\"wrong\");\n // highlight the correct one\n Array.from(answerButtons.children).forEach(btn => {\n if (btn.textContent === correct) btn.classList.add(\"correct\");\n });\n }\n\n scoreEl.textContent = `Score: ${score}`;\n nextBtn.style.display = \"block\";\n}\n\nnextBtn.addEventListener(\"click\", () => {\n currentQuestionIndex++;\n if (currentQuestionIndex < questions.length) {\n showQuestion();\n } else {\n endGame();\n }\n});\n\nfunction endGame() {\n questionEl.textContent = `Game Over! Final Score: ${score}`;\n answerButtons.innerHTML = \"\";\n\n if (score > highScore) {\n highScore = score;\n localStorage.setItem(\"highScore\", highScore.toString());\n highScoreEl.textContent = `New High Score! ${highScore}`;\n } else {\n highScoreEl.textContent = `High Score: ${highScore}`;\n }\n\n nextBtn.style.display = \"none\";\n}\n\nplayAgainBtn.addEventListener(\"click\", startQuiz);\n\nclearHighScoreBtn.addEventListener(\"click\", () => {\n localStorage.removeItem(\"highScore\");\n highScore = 0;\n highScoreEl.textContent = \"High Score: 0\";\n});\n\nstartQuiz();\n","style.css":"body {\n font-family: Arial, sans-serif;\n background: linear-gradient(to bottom right, #b5d3ff, #e0eaff);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 20px;\n}\n\n.trivia-box {\n background-color: #ffffff;\n border-radius: 16px;\n box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);\n padding: 30px;\n max-width: 500px;\n width: 100%;\n\n /* makes it grow with content */\n height: auto;\n box-sizing: border-box;\n\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.question {\n font-size: 1.5rem;\n text-align: center;\n color: #333;\n margin: 0;\n}\n\n.answer-buttons {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.answer-buttons button {\n padding: 14px;\n font-size: 1rem;\n border-radius: 10px;\n border: none;\n background-color: #e8f0ff;\n color: #222;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.answer-buttons button:hover {\n background-color: #cfe0ff;\n transform: scale(1.03);\n}\n\n@media (max-width: 480px) {\n .trivia-box {\n padding: 20px;\n }\n\n .question {\n font-size: 1.25rem;\n }\n\n .answer-buttons button {\n font-size: 0.95rem;\n padding: 12px;\n }\n}\n\n.correct {\n background-color: #a2e6a2 !important;\n}\n\n.wrong {\n background-color: #f7a8a8 !important;\n}\n\n.controls {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-top: 10px;\n}\n\n.controls button {\n background-color: #dce7ff;\n}\n","index.html":"\n\n\n \n \n Trivia Quiz\n \n\n\n

Trivia Quiz

High Score: 0

Score: 0

Loading question...

\n \n \n \n

\n\n \n\n\n"},"chat_history":[],"assets":[{"name":"js_cover","created_at":"2025-10-26T03:43:50.951107Z","resource_type":"image","tags":[],"project_id":10319,"creator":"","cloudinary_id":"tjl3ixga219un3yjg3e0","deleted":false,"id":87668}],"messages_sent":0,"comments":[],"steps":[]}