RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added ai!

Browse source
This commit is contained in:
RezHackXYZ 2025-05-25 12:28:14 +05:30
parent ad959266a5
commit d1c8ae269b
No known key found for this signature in database
15 changed files with 311 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -4,7 +4,7 @@
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "vite dev --host",
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"prepare": "svelte-kit sync || echo ''",

133
src/lib/config.js Normal file
View file

@ -0,0 +1,133 @@
export let AnswersSymbolAndColorScheme = [
{
color: "#6E0000",
selectedColor: "#AA2222",
hoverBorderColor: "#FF5D5D",
selectedBorderColor: "#FF0000",
symbol: "nf-md-triangle",
},
{
color: "#00316E",
selectedColor: "#2255AA",
hoverBorderColor: "#5D9CFF",
selectedBorderColor: "#0000FF",
symbol: "nf-fa-square",
},
{
color: "#6E6E00",
selectedColor: "#AAAA22",
hoverBorderColor: "#FFFF5D",
selectedBorderColor: "#DDFF00",
symbol: "nf-fa-circle",
},
{
color: "#006E00",
selectedColor: "#22AA22",
hoverBorderColor: "#5DFF5D",
selectedBorderColor: "#00FF00",
symbol: "nf-fa-diamond",
},
{
color: "#4B0082",
selectedColor: "#7F33B5",
hoverBorderColor: "#B066FF",
selectedBorderColor: "#9932CC",
symbol: "nf-md-star",
},
{
color: "#FF8C00",
selectedColor: "#FFB347",
hoverBorderColor: "#FFD580",
selectedBorderColor: "#FFA500",
symbol: "nf-md-hexagon",
},
{
color: "#008B8B",
selectedColor: "#33CCCC",
hoverBorderColor: "#66FFFF",
selectedBorderColor: "#00CED1",
symbol: "nf-md-octagon",
},
{
color: "#8B4513",
selectedColor: "#CD853F",
hoverBorderColor: "#DEB887",
selectedBorderColor: "#A0522D",
symbol: "nf-md-heart",
},
];
export let DefaultQuestions = [
{
name: "What should you do when you're free?",
answers: ["Do something in real life!", "Play video games", "Code!", "Touch grass!"],
correctAnswer: 2,
},
{
name: "Is RezHackXYZ the best programmer in the world?",
answers: ["Yes :)", "No :("],
correctAnswer: 0,
},
{
name: "Best place in the world?",
answers: [
"Google",
"Microsoft",
"Apple",
"Samsung",
"Hack Club!! :D",
"Amazon",
"Facebook",
"Twitter",
],
correctAnswer: 4,
},
];
export let AiPrompts = {
GenerateQuestionsUsingAI: `
You are the AI of a quiz game.
Generate a list of quiz questions with possible answers and the correct answer index.
Each question must have:
- A "name" (question text)
- An "answers" array (minimum 2, maximum 8 options)
- A "correctAnswer" (index starting from 0)
Ensure the questions are diverse.
Example format:
{
"name": "What is the capital of France?",
"answers": [
"Paris",
"London",
"Berlin",
"Madrid"
],
"correctAnswer": 0
}
JUST PROVIDE THE JSON AND NOTHING ELSE.
The user's topic of interest is:
[topic]`,
GenerateOptionsUsingAI: `
You are the AI of a quiz game.
Generate a list of answers relevant to the Question the correct answer index.
generate 2 things for the question:
- An "answers" array (minimum 2, maximum 8 options)
- A "correctAnswer" (index starting from 0)
Ensure the questions are diverse.
Example format if the question is "What is the capital of France?":
{
"answers": [
"Paris",
"London",
"Berlin",
"Madrid"
],
"correctAnswer": 0
}
JUST PROVIDE THE JSON AND NOTHING ELSE.
The user's Question that they want to generate options for is:
[question]
`
};

60
src/lib/config.json
View file

@ -1,60 +0,0 @@
{
"AnswersSymbolAndColor": [
{
"Color": "#6E0000",
"SelectedColor": "#AA2222",
"HoverBorderColor": "#FF5D5D",
"SelectedBorderColor": "#FF0000",
"Symbol": "nf-md-triangle"
},
{
"Color": "#00316E",
"SelectedColor": "#2255AA",
"HoverBorderColor": "#5D9CFF",
"SelectedBorderColor": "#0000FF",
"Symbol": "nf-fa-square"
},
{
"Color": "#6E6E00",
"SelectedColor": "#AAAA22",
"HoverBorderColor": "#FFFF5D",
"SelectedBorderColor": "#DDFF00",
"Symbol": "nf-fa-circle"
},
{
"Color": "#006E00",
"SelectedColor": "#22AA22",
"HoverBorderColor": "#5DFF5D",
"SelectedBorderColor": "#00ff00",
"Symbol": "nf-fa-diamond"
},
{
"Color": "#4B0082",
"SelectedColor": "#7F33B5",
"HoverBorderColor": "#B066FF",
"SelectedBorderColor": "#9932CC",
"Symbol": "nf-md-star"
},
{
"Color": "#FF8C00",
"SelectedColor": "#FFB347",
"HoverBorderColor": "#FFD580",
"SelectedBorderColor": "#FFA500",
"Symbol": "nf-md-hexagon"
},
{
"Color": "#008B8B",
"SelectedColor": "#33CCCC",
"HoverBorderColor": "#66FFFF",
"SelectedBorderColor": "#00CED1",
"Symbol": "nf-md-octagon"
},
{
"Color": "#8B4513",
"SelectedColor": "#CD853F",
"HoverBorderColor": "#DEB887",
"SelectedBorderColor": "#A0522D",
"Symbol": "nf-md-heart"
}
]
}

24
src/routes/create/+page.svelte
View file

@ -1,22 +1,28 @@
<script>
import UseDemoQuestions from './components/buttons/UseDemoQuestions.svelte';
import NewQuestion from './components/buttons/NewQuestion.svelte';
import StartGame from './components/buttons/StartGame.svelte';
import Question from './components/Questions/question.svelte';
import { questions } from './logic/GameCreateData.svelte.js';
$inspect(questions);
import UseDemoQuestions from "./components/buttons/UseDemoQuestions.svelte";
import NewQuestion from "./components/buttons/NewQuestion.svelte";
import StartGame from "./components/buttons/StartGame.svelte";
import Question from "./components/Questions/question.svelte";
import { questions, Wait } from "./logic/GameCreateData.svelte.js";
import WaitStartGame from "./components/buttons/WaitStartGame.svelte";
import GenerateQuetionsUsingAi from "./components/buttons/GenerateQuetionsUsingAI.svelte";
</script>
<div class="bg-grey-900 flex justify-center p-5">
<div class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg">
<UseDemoQuestions />
<div
class="flex flex-col items-center justify-center gap-1 rounded-lg bg-gray-900 p-8 shadow-lg"
>
<div class="flex gap-3"><UseDemoQuestions /> <GenerateQuetionsUsingAi /></div>
{#each questions.v as question, index}
<Question {index} />
{/each}
<div class="flex gap-3">
<NewQuestion />
{#if Wait.v == false}
<StartGame />
{:else}
<WaitStartGame />
{/if}
</div>
</div>
</div>

12
src/routes/create/components/Questions/question.svelte
View file

@ -1,5 +1,6 @@
<script>
import DeleteQuestion from "../buttons/DeleteQuestion.svelte";
import GenerateOptionsUsingAI from "../buttons/GenerateOptionsUsingAI.svelte";
import Answers from "./answers.svelte";
import { questions } from "../../logic/GameCreateData.svelte.js";
@ -20,16 +21,13 @@
<select
bind:value={questions.v[index].answers.length}
onchange={(e) => {
const newLength = parseInt(e.target.value);
const newLength = questions.v[index].answers.length;
const currentAnswers = questions.v[index].answers;
if (newLength > currentAnswers.length) {
// Add more answers
while (questions.v[index].answers.length < newLength) {
questions.v[index].answers = [
...questions.v[index].answers,
{ text: "", correct: false },
];
questions.v[index].answers.push("");
}
} else if (newLength < currentAnswers.length) {
// Remove excess answers
@ -47,9 +45,11 @@
</div>
<div class="flex flex-col gap-2">
{#each questions.v[index].answers as answer, answersIndex}
{#each questions.v[index].answers as _, answersIndex}
<Answers questionsIndex={index} {answersIndex} />
{/each}
</div>
<input type="file">
<GenerateOptionsUsingAI {index} />
</div>
</div>

19
src/routes/create/components/buttons/GenerateOptionsUsingAI.svelte Normal file
View file

@ -0,0 +1,19 @@
<script>
import { GenerateOptionsUsingAI } from "../../logic/GenerateOptionsUsingAI.js";
import { questions } from "../../logic/GameCreateData.svelte.js";
let props = $props();
let index = props.index;
</script>
{#if questions.v[index].answers.every((answer) => answer === "")}
<button
onclick={() => {
GenerateOptionsUsingAI(index);
}}
class="mt-1 mb-1 flex h-fit cursor-pointer items-center justify-center gap-2 rounded-xl bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-5"
>
<i class="nf nf-cod-sparkle"></i>
Generate Options using AI
</button>
{/if}

14
src/routes/create/components/buttons/GenerateQuetionsUsingAI.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
import { GenerateQuestionsUsingAI } from "../../logic/GenerateQuestionsUsingAI.js";
import { questions } from "../../logic/GameCreateData.svelte.js";
</script>
{#if questions.v.length === 0 || (questions.v.length === 1 && questions.v[0].name === "" && questions.v[0].answers.every((answer) => answer === "") && questions.v[0].correctAnswer === undefined)}
<button
onclick={GenerateQuestionsUsingAI}
class="-mt-5 mb-3 flex h-fit cursor-pointer items-center justify-center gap-2 rounded-xl bg-blue-700 p-2 transition-all hover:scale-110 hover:-rotate-5"
>
<i class="nf nf-cod-sparkle"></i>
Generate questions using AI
</button>
{/if}

4
src/routes/create/components/buttons/WaitStartGame.svelte
View file

@ -1,10 +1,10 @@
<script>
import { startGame } from '../../logic/StartGame.js';
import { startGame } from "../../logic/StartGame.js";
</script>
<button
onclick={startGame}
class="flex h-fit cursor-pointer items-center justify-center gap-1 rounded-xl bg-gray-700 p-2"
class="flex h-fit cursor-pointer items-center justify-center gap-1 rounded-xl bg-gray-700 p-2 transition-all hover:scale-110"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"

50
src/routes/create/logic/GameCreateData.svelte.js
View file

@ -1,54 +1,36 @@
import { DefaultQuestions } from "$lib/config.js";
export let Wait = $state({
v: false,
});
export let questions = $state({
v: [
{
name: '',
answers: ['', '', '', ''],
correctAnswer: undefined
}
]
name: "",
answers: ["", "", "", ""],
correctAnswer: undefined,
},
],
});
let DemoQuestions = [
{
name: 'Is hack club awesome?',
answers: ['its ok', 'its the BEST place in the world', 'its bad', 'Gu Gu Ga Ga'],
correctAnswer: 1
},
{
name: 'Who is the best programer in the world?',
answers: ['Some person', 'Bill Gates', 'RezHackXYZ', 'another person'],
correctAnswer: 2
},
{
name: 'What was the 5/11 incident?',
answers: [
'mass pings of @/birds',
'twin towers getting blasted by planes',
'the opening ceremony of the store of 7/11 on the 5/11 date',
'the opening ceremony of the competitor store of 7/11'
],
correctAnswer: 0
}
];
export function SetQuestionsToDemoQuestions() {
questions.v = DemoQuestions;
questions.v = DefaultQuestions;
}
export function AddQuestion() {
questions.v.push({
name: '',
answers: ['', '', '', ''],
correctAnswer: undefined
name: "",
answers: ["", "", "", ""],
correctAnswer: undefined,
});
}
export function DeleteQuestion(index) {
if (questions.v.length > 1) {
if (confirm('Are you sure you want to delete this question? You cant undo this.')) {
if (confirm("Are you sure you want to delete this question? You cant undo this.")) {
questions.v.splice(index, 1);
}
} else {
alert('You need at least one question.');
alert("You need at least one question.");
}
}

34
src/routes/create/logic/GenerateOptionsUsingAI.js Normal file
View file

@ -0,0 +1,34 @@
import { questions } from "./GameCreateData.svelte.js";
import { AiPrompts } from "$lib/config.js";
export function GenerateOptionsUsingAI(index) {
fetch("https://ai.hackclub.com/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
messages: [
{
role: "user",
content: AiPrompts.GenerateOptionsUsingAI.replace(
"[question]",
questions.v[index].name,
),
},
],
}),
})
.then((response) => response.json())
.then((data) => {
let question = questions.v[index].name;
questions.v[index] = JSON.parse(data.choices[0].message.content);
questions.v[index].name = question;
})
.catch((error) => {
alert("Error:" + error);
return;
});
alert("added!");
}

38
src/routes/create/logic/GenerateQuestionsUsingAI.js Normal file
View file

@ -0,0 +1,38 @@
import { questions } from "./GameCreateData.svelte.js";
import { AiPrompts } from "$lib/config.js";
export function GenerateQuestionsUsingAI() {
let topic = window.prompt(
"What is the topic of the questions?\nand the number of questions in the topic?",
);
if (!topic) {
return;
}
fetch("https://ai.hackclub.com/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
messages: [
{
role: "user",
content: AiPrompts.GenerateQuestionsUsingAI.replace("[topic]", topic),
},
],
}),
})
.then((response) => response.json())
.then((data) => {
console.log(data);
questions.v = JSON.parse(data.choices[0].message.content);
})
.catch((error) => {
alert("Error:" + error);
return;
});
alert("added!");
}

29
src/routes/create/logic/InsertGameInDB.js
View file

@ -1,16 +1,15 @@
import { supabase } from '$lib/supabase';
import { supabase } from "$lib/supabase";
export async function createGame(questions, gamePin) {
const { data: gameData, error: gameError } = await supabase.from('games').insert({
creator: 'anonymous',
const { data: gameData, error: gameError } = await supabase.from("games").insert({
creator: "anonymous",
creationdate: new Date().toISOString(),
status: 'lobby',
gamepin: gamePin
status: "lobby",
gamepin: gamePin,
});
if (gameError) {
alert('Failed to create game: ' + gameError.message + '\n\nPlease try again.');
alert("Failed to create game: " + gameError.message + "\n\nPlease try again.");
return;
}
@ -18,16 +17,16 @@ export async function createGame(questions, gamePin) {
const questionsData = questions.map((q, index) => ({
gameid: gamePin,
questionstext: q.name,
correctanswer: q.correctAnswer
correctanswer: q.correctAnswer,
}));
const { data: questionsResult, error: questionsError } = await supabase
.from('questions')
.from("questions")
.insert(questionsData)
.select('id');
.select("id");
if (questionsError) {
alert('Failed to insert questions: ' + questionsError.message + '\n\nPlease try again.');
alert("Failed to insert questions: " + questionsError.message + "\n\nPlease try again.");
return;
}
@ -36,15 +35,17 @@ export async function createGame(questions, gamePin) {
questions[index].answers.forEach((answer, answerIndex) => {
answersData.push({
questionid: question.id,
content: answer
content: answer,
});
});
});
const { error: answersError } = await supabase.from('answers').insert(answersData);
const { error: answersError } = await supabase.from("answers").insert(answersData);
if (answersError) {
alert('Failed to insert answers: ' + answersError.message + '\n\nPlease try again.');
alert("Failed to insert answers: " + answersError.message + "\n\nPlease try again.");
return;
}
window.location.href = "/host/" + gamePin;
}

9
src/routes/create/logic/StartGame.js
View file

@ -1,9 +1,7 @@
import { createGame } from "./InsertGameInDB.js";
import { questions } from "./GameCreateData.svelte.js";
import { questions,Wait } from "./GameCreateData.svelte.js";
export async function startGame() {
if (questions.v.some((q) => q.name === "")) return alert("Please fill all questions");
if (questions.v.some((q) => q.answers.some((a) => a === ""))) return alert("Fill all options");
if (questions.v.some((q) => q.correctAnswer === undefined))
@ -13,7 +11,6 @@ export async function startGame() {
.toString()
.padStart(6, "0");
await createGame(questions.v, gamePin);
Wait.v = true;
window.location.href = "/host/" + gamePin;
}
await createGame(questions.v, gamePin);}

9
src/routes/host/[gamePin]/components/DuringGame/awnseringQuetions/Awnsers.svelte
View file

@ -1,6 +1,7 @@
<script>
import { CurrentQuestionDetails } from "../../../logic/HostsData.svelte.js";
import config from "$lib/config.json";
import { AnswersSymbolAndColorScheme } from "$lib/config.js";
</script>
<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
@ -10,12 +11,12 @@
<label
for="O{index}"
style="
--border-color: {config.AnswersSymbolAndColor[index].Color};
--bg-color: {config.AnswersSymbolAndColor[index].Color};
--border-color: {AnswersSymbolAndColorScheme[index].Color};
--bg-color: {AnswersSymbolAndColorScheme[index].Color};
"
class="w-full rounded-lg border-[5px] border-[var(--border-color)] bg-[var(--bg-color)] pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all"
>
<i class="nf {config.AnswersSymbolAndColor[index].Symbol}"></i>
<i class="nf {AnswersSymbolAndColorScheme[index].Symbol}"></i>
{answer}
</label>
</div>

18
src/routes/play/[gamePin]/components/awnseringQuetions/Awnsers.svelte
View file

@ -1,6 +1,6 @@
<script>
import { questions, Selected } from "../../logic/HostsData.svelte.js";
import config from "$lib/config.json";
import { AnswersSymbolAndColorScheme } from "$lib/config.js";
</script>
<div class="mt-5 grid grid-cols-2 gap-5 gap-x-3">
@ -18,17 +18,17 @@
<label
for="O{index}"
style="
--border-color: {config.AnswersSymbolAndColor[index].Color};
--bg-color: {config.AnswersSymbolAndColor[index].Color};
--border-color-checked: {config.AnswersSymbolAndColor[index].SelectedColor};
--bg-color-checked: {config.AnswersSymbolAndColor[index].SelectedColor};
--border-color-hover: {config.AnswersSymbolAndColor[index].HoverBorderColor};
--border-color-checked: {config.AnswersSymbolAndColor[index].SelectedBorderColor};
--border-color-hover: {config.AnswersSymbolAndColor[index].HoverBorderColor};
--border-color: {AnswersSymbolAndColorScheme[index].Color};
--bg-color: {AnswersSymbolAndColorScheme[index].Color};
--border-color-checked: {AnswersSymbolAndColorScheme[index].SelectedColor};
--bg-color-checked: {AnswersSymbolAndColorScheme[index].SelectedColor};
--border-color-hover: {AnswersSymbolAndColorScheme[index].HoverBorderColor};
--border-color-checked: {AnswersSymbolAndColorScheme[index].SelectedBorderColor};
--border-color-hover: {AnswersSymbolAndColorScheme[index].HoverBorderColor};
"
class="w-full cursor-pointer rounded-lg border-[5px] border-[var(--border-color)] bg-[var(--bg-color)] pt-1 pr-2 pb-1 pl-2 text-center text-3xl transition-all peer-checked:border-[var(--border-color-checked)] peer-checked:border-[var(--border-color-checked)] peer-checked:bg-[var(--bg-color-checked)] hover:border-[var(--border-color-hover)]"
>
<i class="nf {config.AnswersSymbolAndColor[index].Symbol}"></i>
<i class="nf {AnswersSymbolAndColorScheme[index].Symbol}"></i>
{answer}
</label>
</div>