Quiz Quest

{"name":"the quiz","description":"Welcome to Quiz Quest! Test your knowledge and challenge your friends in this interactive quiz game where every correct answer brings you closer to victory! With engaging questions and fun visuals, learning has never been so entertaining.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/aogvkhismdqmj2bovug0","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2024-11-14T20:26:40.330108Z","updated_at":"2024-11-14T20:26:40.330110Z","user_id":5,"status":"PRIVATE","parent_id":2879,"id":4594,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let quiz = [\n {\n question: \"do you know what does ^ mean\",\n choices: [\"yes\", \"no\"],\n correct: 0,\n points: 100,\n wrapWidth: 350,\n textSize: 22 // Text size for this question\n },\n {\n question: \"DYK what does e mean\",\n choices: [\"yes\", \"no\"],\n correct: 0,\n points: 200,\n wrapWidth: 350,\n textSize: 22 // Text size for this question\n },\n {\n question: \"DYK what does ^^ mean\",\n choices: [\"y\", \"n\"],\n correct: 0,\n points: 500,\n wrapWidth: 350,\n textSize: 22 // Text size for this question\n },\n {\n question: \"DYK what does {x} mean\",\n choices: [\"y\", \"n\"],\n correct: 0,\n points: 1000,\n wrapWidth: 350,\n textSize: 22 // Text size for this question\n },\n {\n question: \"what does # mean\",\n choices: [\"y\", \"n\"],\n correct: 0,\n points: 2000,\n wrapWidth: 350,\n textSize: 22 // Text size for this question\n }\n // Add more questions as needed\n];\n\nlet currentQuestion = 0; // To keep track of the current question\nlet score = 0; // To keep track of the user's score\nlet perfectscore = 0; // Initialize perfectscore to 0\n\nlet correctAnswers = 0; // Variable to keep track of the number of correct answers\n\nlet windywidth = 1000;\nlet windyheight = 600;\n\nlet gameshowImg;\nlet quizImg; // Variable to store the quiz image\nlet sixcorrectImg; // Variable to store the correct image\n\nfunction preload() {\n gameshowImg = loadImage(\"@asset('the gameshow')\");\n quizImg = loadImage(\"@asset('the quiz')\"); // Load the quiz image\n // Remove the loading of the \"6 correct\" image\n // sixcorrectImg = loadImage(\"@asset('six correct')\"); \n}\n\nfunction setup() {\n createCanvas(windywidth, windyheight);\n background(200);\n\n // Calculate the perfect score by summing up the points of all questions\n for (let i = 0; i < quiz.length; i++) {\n perfectscore += quiz[i].points;\n }\n}\n\nlet buttons = []; // Array to store buttons\n\nlet boxX = 150; // X position of the box\nlet boxY = 150; // Y position of the box\nlet boxWidth = 340; // Width of the box\nlet boxHeight = 250; // Height of the box\n\nfunction draw() {\n background(200);\n\n // Draw the appropriate image\n if (currentQuestion < quiz.length) {\n image(gameshowImg, 0, 0, width, height);\n } else {\n if (!sixcorrectImg) {\n sixcorrectImg = loadImage(\"@asset('six correct')\", () => {\n // Callback to draw the image after it is loaded\n image(sixcorrectImg, 0, 0, width, height);\n displayFinalScore(); // Display the final score\n });\n } else {\n image(sixcorrectImg, 0, 0, width, height);\n displayFinalScore(); // Display the final score\n }\n return; // Exit the draw function after displaying the final score\n }\n\n // Draw the box\n fill(99, 155, 255); // Set the fill color\n stroke(91, 110, 255); // Set the stroke color\n rect(boxX, boxY, boxWidth, boxHeight);\n\n stroke(99, 155, 255);\n fill(0);\n textAlign(CENTER, CENTER);\n\n if (currentQuestion < quiz.length) {\n // Set the text size for the current question\n textSize(quiz[currentQuestion].textSize);\n\n // Display the question\n let wrapWidth = quiz[currentQuestion].wrapWidth; // Get the wrap width for the current question\n let wrappedQuestion = wrapText(quiz[currentQuestion].question, wrapWidth);\n text(wrappedQuestion, boxX + boxWidth / 2, boxY + 50);\n\n // Create buttons for each choice\n let totalChoicesHeight = Math.ceil(quiz[currentQuestion].choices.length / 2) * 50; // Total height required for all choice rows\n let choiceY = 350 + (boxHeight - totalChoicesHeight) / 2; // Start Y position to center choices vertically\n\n for (let i = 0; i < quiz[currentQuestion].choices.length; i++) {\n let choiceText = quiz[currentQuestion].choices[i];\n textSize(16);\n let textWidthWithPadding = textWidth(choiceText) + 20; // Add padding to the text width\n let buttonX = 550 + (i % 2 === 0 ? (boxWidth / 4 - textWidthWithPadding / 2) : (3 * boxWidth / 4 - textWidthWithPadding / 2)); // Position buttons in rows of two\n let button = createButton(choiceText);\n button.position(buttonX, choiceY);\n button.size(textWidthWithPadding, 45);\n button.class('quiz-button'); // Apply the CSS class\n button.mousePressed(() => checkAnswer(i));\n buttons.push(button);\n\n if (i % 2 === 1) {\n choiceY += 50; // Adjust Y position for the next row\n }\n }\n // Draw the quiz image at the top center of the screen if the quiz is ongoing\n if (currentQuestion < quiz.length) {\n image(quizImg, 210, 340);\n }\n }\n}\n\n// Function to display the final score\nfunction displayFinalScore() {\n textSize(22); // Reset text size for final score display\n stroke(0);\n fill(255);\n text(`Quiz Over! Your score is: ${score}/${perfectscore}`, boxX + boxWidth / 2, 100);\n text(`also known as: ${correctAnswers} out of ${quiz.length} questions right!`, boxX + boxWidth / 2, 140);\n}\n\n// Helper function to wrap text\nfunction wrapText(text, width) {\n let words = text.split(' ');\n let lines = [];\n let currentLine = words[0];\n\n for (let i = 1; i < words.length; i++) {\n let word = words[i];\n let testLine = currentLine + ' ' + word;\n let testWidth = textWidth(testLine);\n if (testWidth > width) {\n lines.push(currentLine);\n currentLine = word;\n } else {\n currentLine = testLine;\n }\n }\n lines.push(currentLine);\n return lines.join('\\n');\n}\n\nfunction checkAnswer(choiceIndex) {\n // Check if the answer is correct\n if (choiceIndex === quiz[currentQuestion].correct) {\n console.log(\"Correct!\");\n score += quiz[currentQuestion].points; // Add points to the score\n correctAnswers++; // Increment the count of correct answers\n } else {\n console.log(\"Incorrect!\");\n }\n // Move to the next question\n currentQuestion++;\n clearButtons(); // Clear existing buttons\n if (currentQuestion >= quiz.length) {\n // If we've reached the end of the quiz, display the score\n console.log(\"Quiz Over! Your score is: \" + score + \"/\" + perfectscore);\n noLoop(); // Stop the draw loop\n }\n}\n\nfunction clearButtons() {\n for (let button of buttons) {\n button.remove();\n }\n buttons = [];\n}","style.css":"body {\n margin: 0;\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n}\n\ncanvas {\n display: block;\n}\n\nbutton {\n padding: 5px 10px; /* Adjust the padding values as needed */\n font-size: 18px; /* Make sure the font size matches the text size in the canvas */\n border: none;\n border-radius: 1px;\n background-color: #007BFF;\n color: white;\n cursor: pointer;\n text-align: center;\n}\nbutton:hover {\n background-color: #0056b3;\n}","index.html":"\n\n\n \n \n Quiz Quest\n \n \n \n\n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"qf1kjydhpodxbbu8wvur","name":"the gameshow","deleted":false,"id":48207,"created_at":"2024-11-14T20:26:40.340353Z","project_id":4594,"resource_type":"image"},{"cloudinary_id":"aogvkhismdqmj2bovug0","name":"the quiz","deleted":false,"id":48206,"created_at":"2024-11-14T20:26:40.338280Z","project_id":4594,"resource_type":"image"},{"cloudinary_id":"cnozsf33pq2oskstpheq","name":"six correct","deleted":false,"id":48205,"created_at":"2024-11-14T20:26:40.336643Z","project_id":4594,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}