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

merge both repos! atempt 1 by making the file system the same!

Browse source
This commit is contained in:
RezHackXYZ 2025-05-29 13:11:49 +05:30
parent badb303ea6
commit 2fe58ee6be
No known key found for this signature in database
128 changed files with 2320 additions and 4285 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/routes/kahootclone/create/+page.svelte Normal file
View file

@ -0,0 +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, 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"
>
<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>

23
src/routes/kahootclone/create/components/Questions/answers.svelte Normal file
View file

@ -0,0 +1,23 @@
<script>
import { questions } from '../../logic/GameCreateData.svelte.js';
let props = $props();
let questionsIndex = props.questionsIndex;
let index = props.answersIndex;
</script>
<div class="flex items-center gap-2">
<input
type="radio"
value={index}
name={index.toString()}
bind:group={questions.v[questionsIndex].correctAnswer}
class="input"
/>
<input
placeholder="Option {index + 1}"
bind:value={questions.v[questionsIndex].answers[index]}
class="w-[500px] rounded-lg bg-gray-800 p-1 text-center text-white"
/>
</div>

54
src/routes/kahootclone/create/components/Questions/question.svelte Normal file
View file

@ -0,0 +1,54 @@
<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";
let props = $props();
let index = props.index;
</script>
<div class="flex items-center gap-3">
<div class="mb-3 flex flex-col items-center justify-center gap-1 rounded-2xl bg-gray-600 p-2">
<div class="flex h-fit items-center gap-3">
<h1 class="mt-2 mb-3 text-2xl">Q{index + 1}.</h1>
<input
type="text"
bind:value={questions.v[index].name}
placeholder="Question {index + 1}"
class="h-fit w-[500px] rounded-xl bg-gray-800 p-1 text-center text-2xl text-white"
/>
<select
bind:value={questions.v[index].answers.length}
onchange={(e) => {
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.push("");
}
} else if (newLength < currentAnswers.length) {
// Remove excess answers
questions.v[index].answers = currentAnswers.slice(0, newLength);
}
}}
class="h-fit rounded-xl bg-gray-800 p-1 text-center text-white"
>
<option disabled selected>Options</option>
{#each Array(7) as _, i}
<option value={i + 2}>{i + 2}</option>
{/each}
</select>
<DeleteQuestion {index} />
</div>
<div class="flex flex-col gap-2">
{#each questions.v[index].answers as _, answersIndex}
<Answers questionsIndex={index} {answersIndex} />
{/each}
</div>
<GenerateOptionsUsingAI {index} />
</div>
</div>

20
src/routes/kahootclone/create/components/buttons/DeleteQuestion.svelte Normal file
View file

@ -0,0 +1,20 @@
<script>
import { DeleteQuestion } from '../../logic/GameCreateData.svelte.js';
let props = $props();
</script>
<button
onclick={() => DeleteQuestion(props.index)}
class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-red-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
/></svg
>Delete question</button
>

19
src/routes/kahootclone/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/kahootclone/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}

15
src/routes/kahootclone/create/components/buttons/NewQuestion.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
import { AddQuestion } from '../../logic/GameCreateData.svelte.js';
</script>
<button
onclick={() => AddQuestion()}
class="flex h-fit cursor-pointer items-center justify-center rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg
>New question</button
>

18
src/routes/kahootclone/create/components/buttons/StartGame.svelte Normal file
View file

@ -0,0 +1,18 @@
<script>
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-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M560-360q17 0 29.5-12.5T602-402q0-17-12.5-29.5T560-444q-17 0-29.5 12.5T518-402q0 17 12.5 29.5T560-360Zm-30-128h60q0-29 6-42.5t28-35.5q30-30 40-48.5t10-43.5q0-45-31.5-73.5T560-760q-41 0-71.5 23T446-676l54 22q9-25 24.5-37.5T560-704q24 0 39 13.5t15 36.5q0 14-8 26.5T578-596q-33 29-40.5 45.5T530-488ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
/></svg
>Start Quiz</button
>

15
src/routes/kahootclone/create/components/buttons/UseDemoQuestions.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
import { SetQuestionsToDemoQuestions } from '../../logic/GameCreateData.svelte.js';
</script>
<button
onclick={() => SetQuestionsToDemoQuestions()}
class="-mt-5 mb-3 flex h-fit cursor-pointer items-center justify-center rounded-xl bg-green-700 p-2 transition-all hover:scale-110 hover:-rotate-10"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" /></svg
>Use demo questions</button
>

18
src/routes/kahootclone/create/components/buttons/WaitStartGame.svelte Normal file
View file

@ -0,0 +1,18 @@
<script>
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 transition-all hover:scale-110"
><svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#FFFFFF"
><path
d="M560-360q17 0 29.5-12.5T602-402q0-17-12.5-29.5T560-444q-17 0-29.5 12.5T518-402q0 17 12.5 29.5T560-360Zm-30-128h60q0-29 6-42.5t28-35.5q30-30 40-48.5t10-43.5q0-45-31.5-73.5T560-760q-41 0-71.5 23T446-676l54 22q9-25 24.5-37.5T560-704q24 0 39 13.5t15 36.5q0 14-8 26.5T578-596q-33 29-40.5 45.5T530-488ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"
/></svg
>Wait for game to be created</button
>

36
src/routes/kahootclone/create/logic/GameCreateData.svelte.js Normal file
View file

@ -0,0 +1,36 @@
import { DefaultQuestions } from "$lib/config.js";
export let Wait = $state({
v: false,
});
export let questions = $state({
v: [
{
name: "",
answers: ["", "", "", ""],
correctAnswer: undefined,
},
],
});
export function SetQuestionsToDemoQuestions() {
questions.v = DefaultQuestions;
}
export function AddQuestion() {
questions.v.push({
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.")) {
questions.v.splice(index, 1);
}
} else {
alert("You need at least one question.");
}
}

34
src/routes/kahootclone/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/kahootclone/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!");
}

51
src/routes/kahootclone/create/logic/InsertGameInDB.js Normal file
View file

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

16
src/routes/kahootclone/create/logic/StartGame.js Normal file
View file

@ -0,0 +1,16 @@
import { createGame } from "./InsertGameInDB.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))
return alert("Select correct answers");
const gamePin = Math.floor(Math.random() * 1000000)
.toString()
.padStart(6, "0");
Wait.v = true;
await createGame(questions.v, gamePin);}