commit 4f52a8da33889a4a4b4cace41b85d1dfcd77beee
Author: root <root@hub.scroll.pub> Date: 2024-12-28 00:04:44 +0000 Subject: Initial commit diff --git a/body.html b/body.html new file mode 100644 index 0000000..6e47665 --- /dev/null +++ b/body.html @@ -0,0 +1,33 @@ +<header> + <h1>QuizGenius</h1> + <p>Pick a topic, answer questions, and track your progress!</p> +</header> + +<main> + <section id="topic-selection"> + <h2>Choose a Topic</h2> + <div class="topics"> + <button data-topic="history">History</button> + <button data-topic="science">Science</button> + <button data-topic="math">Math</button> + <button data-topic="literature">Literature</button> + </div> + </section> + + <section id="quiz-section" class="hidden"> + <h2>Quiz Time!</h2> + <div id="question-container"></div> + <button id="submit-answer" class="hidden">Submit Answer</button> + <button id="next-question" class="hidden">Next Question</button> + </section> + + <section id="scoreboard" class="hidden"> + <h2>Your Score</h2> + <p>Correct: <span id="correct-answers">0</span></p> + <p>Incorrect: <span id="incorrect-answers">0</span></p> + </section> +</main> + +<footer> + <p>Keep learning, keep growing!</p> +</footer> \ No newline at end of file diff --git a/index.scroll b/index.scroll new file mode 100644 index 0000000..17e49d1 --- /dev/null +++ b/index.scroll @@ -0,0 +1,8 @@ +buildHtml +baseUrl https://quizgenius.scroll.pub +metaTags +editButton /edit.html +title QuizGenius - Learn & Test Your Knowledge +style.css +body.html +script.js \ No newline at end of file diff --git a/prompt.json b/prompt.json new file mode 100644 index 0000000..bfc0a6a --- /dev/null +++ b/prompt.json @@ -0,0 +1,25 @@ +{ + "id": "97043c9d-6ce2-42ed-82df-0d64a2bbae08", + "object": "chat.completion", + "created": 1735344264, + "model": "deepseek-chat", + "choices": [ + { + "index": 0, + "message": { + "role": "assistant", + "content": "---domain---\nquizgenius.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://quizgenius.scroll.pub\nmetaTags\neditButton /edit.html\ntitle QuizGenius - Learn & Test Your Knowledge\nstyle.css\nbody.html\nscript.js\n---body.html---\n<header>\n <h1>QuizGenius</h1>\n <p>Pick a topic, answer questions, and track your progress!</p>\n</header>\n\n<main>\n <section id=\"topic-selection\">\n <h2>Choose a Topic</h2>\n <div class=\"topics\">\n <button data-topic=\"history\">History</button>\n <button data-topic=\"science\">Science</button>\n <button data-topic=\"math\">Math</button>\n <button data-topic=\"literature\">Literature</button>\n </div>\n </section>\n\n <section id=\"quiz-section\" class=\"hidden\">\n <h2>Quiz Time!</h2>\n <div id=\"question-container\"></div>\n <button id=\"submit-answer\" class=\"hidden\">Submit Answer</button>\n <button id=\"next-question\" class=\"hidden\">Next Question</button>\n </section>\n\n <section id=\"scoreboard\" class=\"hidden\">\n <h2>Your Score</h2>\n <p>Correct: <span id=\"correct-answers\">0</span></p>\n <p>Incorrect: <span id=\"incorrect-answers\">0</span></p>\n </section>\n</main>\n\n<footer>\n <p>Keep learning, keep growing!</p>\n</footer>\n---style.css---\n:root {\n --primary-color: #4a90e2;\n --secondary-color: #f5f5f5;\n --accent-color: #ff6f61;\n --text-color: #333;\n --font-family: 'Arial', sans-serif;\n}\n\nbody {\n font-family: var(--font-family);\n color: var(--text-color);\n margin: 0;\n padding: 0;\n background-color: var(--secondary-color);\n line-height: 1.6;\n}\n\nheader {\n background-color: var(--primary-color);\n color: white;\n padding: 2rem;\n text-align: center;\n}\n\nmain {\n padding: 2rem;\n}\n\n.topics {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n}\n\nbutton {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 1rem;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n background-color: var(--accent-color);\n}\n\n#quiz-section, #scoreboard {\n margin-top: 2rem;\n}\n\n.hidden {\n display: none;\n}\n\n#question-container {\n background-color: white;\n padding: 1rem;\n border-radius: 5px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n background-color: var(--primary-color);\n color: white;\n margin-top: 2rem;\n}\n---script.js---\nconst topics = document.querySelectorAll('[data-topic]');\nconst quizSection = document.getElementById('quiz-section');\nconst questionContainer = document.getElementById('question-container');\nconst submitAnswerBtn = document.getElementById('submit-answer');\nconst nextQuestionBtn = document.getElementById('next-question');\nconst scoreboard = document.getElementById('scoreboard');\nconst correctAnswersSpan = document.getElementById('correct-answers');\nconst incorrectAnswersSpan = document.getElementById('incorrect-answers');\n\nlet currentTopic = '';\nlet currentQuestionIndex = 0;\nlet correctAnswers = 0;\nlet incorrectAnswers = 0;\n\nconst questions = {\n history: [\n {\n question: \"Who was the first president of the United States?\",\n options: [\"George Washington\", \"Thomas Jefferson\", \"Abraham Lincoln\", \"John Adams\"],\n answer: \"George Washington\"\n },\n {\n question: \"In which year did World War II end?\",\n options: [\"1945\", \"1939\", \"1941\", \"1943\"],\n answer: \"1945\"\n }\n ],\n science: [\n {\n question: \"What is the chemical symbol for water?\",\n options: [\"H2O\", \"CO2\", \"O2\", \"H2\"],\n answer: \"H2O\"\n },\n {\n question: \"Which planet is known as the Red Planet?\",\n options: [\"Mars\", \"Venus\", \"Jupiter\", \"Saturn\"],\n answer: \"Mars\"\n }\n ],\n math: [\n {\n question: \"What is 2 + 2?\",\n options: [\"4\", \"3\", \"5\", \"6\"],\n answer: \"4\"\n },\n {\n question: \"What is the square root of 64?\",\n options: [\"8\", \"6\", \"10\", \"12\"],\n answer: \"8\"\n }\n ],\n literature: [\n {\n question: \"Who wrote 'Romeo and Juliet'?\",\n options: [\"William Shakespeare\", \"Charles Dickens\", \"Jane Austen\", \"Mark Twain\"],\n answer: \"William Shakespeare\"\n },\n {\n question: \"What is the main character in 'Moby Dick'?\",\n options: [\"Captain Ahab\", \"Ishmael\", \"Queequeg\", \"Starbuck\"],\n answer: \"Captain Ahab\"\n }\n ]\n};\n\ntopics.forEach(topic => {\n topic.addEventListener('click', () => {\n currentTopic = topic.dataset.topic;\n document.getElementById('topic-selection').classList.add('hidden');\n quizSection.classList.remove('hidden');\n loadQuestion();\n });\n});\n\nfunction loadQuestion() {\n const question = questions[currentTopic][currentQuestionIndex];\n questionContainer.innerHTML = `\n <h3>${question.question}</h3>\n ${question.options.map(option => `\n <label>\n <input type=\"radio\" name=\"answer\" value=\"${option}\">\n ${option}\n </label>\n `).join('')}\n `;\n submitAnswerBtn.classList.remove('hidden');\n}\n\nsubmitAnswerBtn.addEventListener('click', () => {\n const selectedAnswer = document.querySelector('input[name=\"answer\"]:checked');\n if (selectedAnswer) {\n const question = questions[currentTopic][currentQuestionIndex];\n if (selectedAnswer.value === question.answer) {\n correctAnswers++;\n } else {\n incorrectAnswers++;\n }\n updateScoreboard();\n submitAnswerBtn.classList.add('hidden');\n nextQuestionBtn.classList.remove('hidden');\n }\n});\n\nnextQuestionBtn.addEventListener('click', () => {\n currentQuestionIndex++;\n if (currentQuestionIndex < questions[currentTopic].length) {\n loadQuestion();\n nextQuestionBtn.classList.add('hidden');\n submitAnswerBtn.classList.remove('hidden');\n } else {\n quizSection.classList.add('hidden');\n scoreboard.classList.remove('hidden');\n }\n});\n\nfunction updateScoreboard() {\n correctAnswersSpan.textContent = correctAnswers;\n incorrectAnswersSpan.textContent = incorrectAnswers;\n}\n---end---" + }, + "logprobs": null, + "finish_reason": "stop" + } + ], + "usage": { + "prompt_tokens": 259, + "completion_tokens": 1581, + "total_tokens": 1840, + "prompt_cache_hit_tokens": 0, + "prompt_cache_miss_tokens": 259 + }, + "system_fingerprint": "fp_f1afce2943" +} \ No newline at end of file diff --git a/readme.scroll b/readme.scroll new file mode 100644 index 0000000..f195204 --- /dev/null +++ b/readme.scroll @@ -0,0 +1,2 @@ +# quizgenius.scroll.pub +Website generated by DeepSeek from prompt: Nextjs app for learning courses. The user pick the topic and it generates questions in multiple question format . Show a scoreboard \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..9b60f52 --- /dev/null +++ b/script.js @@ -0,0 +1,119 @@ +const topics = document.querySelectorAll('[data-topic]'); +const quizSection = document.getElementById('quiz-section'); +const questionContainer = document.getElementById('question-container'); +const submitAnswerBtn = document.getElementById('submit-answer'); +const nextQuestionBtn = document.getElementById('next-question'); +const scoreboard = document.getElementById('scoreboard'); +const correctAnswersSpan = document.getElementById('correct-answers'); +const incorrectAnswersSpan = document.getElementById('incorrect-answers'); + +let currentTopic = ''; +let currentQuestionIndex = 0; +let correctAnswers = 0; +let incorrectAnswers = 0; + +const questions = { + history: [ + { + question: "Who was the first president of the United States?", + options: ["George Washington", "Thomas Jefferson", "Abraham Lincoln", "John Adams"], + answer: "George Washington" + }, + { + question: "In which year did World War II end?", + options: ["1945", "1939", "1941", "1943"], + answer: "1945" + } + ], + science: [ + { + question: "What is the chemical symbol for water?", + options: ["H2O", "CO2", "O2", "H2"], + answer: "H2O" + }, + { + question: "Which planet is known as the Red Planet?", + options: ["Mars", "Venus", "Jupiter", "Saturn"], + answer: "Mars" + } + ], + math: [ + { + question: "What is 2 + 2?", + options: ["4", "3", "5", "6"], + answer: "4" + }, + { + question: "What is the square root of 64?", + options: ["8", "6", "10", "12"], + answer: "8" + } + ], + literature: [ + { + question: "Who wrote 'Romeo and Juliet'?", + options: ["William Shakespeare", "Charles Dickens", "Jane Austen", "Mark Twain"], + answer: "William Shakespeare" + }, + { + question: "What is the main character in 'Moby Dick'?", + options: ["Captain Ahab", "Ishmael", "Queequeg", "Starbuck"], + answer: "Captain Ahab" + } + ] +}; + +topics.forEach(topic => { + topic.addEventListener('click', () => { + currentTopic = topic.dataset.topic; + document.getElementById('topic-selection').classList.add('hidden'); + quizSection.classList.remove('hidden'); + loadQuestion(); + }); +}); + +function loadQuestion() { + const question = questions[currentTopic][currentQuestionIndex]; + questionContainer.innerHTML = ` + <h3>${question.question}</h3> + ${question.options.map(option => ` + <label> + <input type="radio" name="answer" value="${option}"> + ${option} + </label> + `).join('')} + `; + submitAnswerBtn.classList.remove('hidden'); +} + +submitAnswerBtn.addEventListener('click', () => { + const selectedAnswer = document.querySelector('input[name="answer"]:checked'); + if (selectedAnswer) { + const question = questions[currentTopic][currentQuestionIndex]; + if (selectedAnswer.value === question.answer) { + correctAnswers++; + } else { + incorrectAnswers++; + } + updateScoreboard(); + submitAnswerBtn.classList.add('hidden'); + nextQuestionBtn.classList.remove('hidden'); + } +}); + +nextQuestionBtn.addEventListener('click', () => { + currentQuestionIndex++; + if (currentQuestionIndex < questions[currentTopic].length) { + loadQuestion(); + nextQuestionBtn.classList.add('hidden'); + submitAnswerBtn.classList.remove('hidden'); + } else { + quizSection.classList.add('hidden'); + scoreboard.classList.remove('hidden'); + } +}); + +function updateScoreboard() { + correctAnswersSpan.textContent = correctAnswers; + incorrectAnswersSpan.textContent = incorrectAnswers; +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..82b86d2 --- /dev/null +++ b/style.css @@ -0,0 +1,70 @@ +:root { + --primary-color: #4a90e2; + --secondary-color: #f5f5f5; + --accent-color: #ff6f61; + --text-color: #333; + --font-family: 'Arial', sans-serif; +} + +body { + font-family: var(--font-family); + color: var(--text-color); + margin: 0; + padding: 0; + background-color: var(--secondary-color); + line-height: 1.6; +} + +header { + background-color: var(--primary-color); + color: white; + padding: 2rem; + text-align: center; +} + +main { + padding: 2rem; +} + +.topics { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + gap: 1rem; +} + +button { + background-color: var(--primary-color); + color: white; + border: none; + padding: 1rem; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: var(--accent-color); +} + +#quiz-section, #scoreboard { + margin-top: 2rem; +} + +.hidden { + display: none; +} + +#question-container { + background-color: white; + padding: 1rem; + border-radius: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +footer { + text-align: center; + padding: 1rem; + background-color: var(--primary-color); + color: white; + margin-top: 2rem; +} \ No newline at end of file