ClueQuest/miniquiz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change

Browse Source
This commit is contained in:
Björn Benouarets
2025-11-04 23:21:40 +01:00
parent 8a6b31c04e
commit aa58908d41
1 changed files with 9 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
app/page.tsx
View File

@@ -2,8 +2,6 @@
import * as React from "react"; import * as React from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { import {
@@ -13,19 +11,17 @@ import {
export default function Home() { export default function Home() {
const options = [ const options = [
"Kino", "Drachenzähmen leicht gemacht",
"Casino", "Casino Royale",
"Spielothek", "Baywatch",
"Kneipe", "Bad Boys",
"Kulturbühne" "Jumanji",
"Fast and Furious"
] ]
const correctAnswer = "Spielothek" const correctAnswer = "Jumanji"
const nextLink = "https://six.christian.miniquiz.your-apps.dev";
const [selectedAnswer, setSelectedAnswer] = React.useState<string | null>(null); const [selectedAnswer, setSelectedAnswer] = React.useState<string | null>(null);
const [showNextLink, setShowNextLink] = React.useState<boolean>(false);
const router = useRouter();
const handleAnswerChange = (value: string) => { const handleAnswerChange = (value: string) => {
setSelectedAnswer(value); setSelectedAnswer(value);
@@ -41,18 +37,13 @@ export default function Home() {
return; return;
} }
alert("Richtige Antwort!") alert("Richtige Antwort!")
setShowNextLink(true);
};
const handleNext = () => {
router.push(nextLink);
}; };
return ( return (
<div className="flex flex-col items-center justify-center h-screen p-10 gap-4"> <div className="flex flex-col items-center justify-center h-screen p-10 gap-4">
<div className="flex flex-col items-center justify-center max-w-2xl w-full gap-8"> <div className="flex flex-col items-center justify-center max-w-2xl w-full gap-8">
<h1 className="text-4xl font-bold">18. Geburtstag</h1> <h1 className="text-4xl font-bold">18. Geburtstag</h1>
<p className="text-lg text-zinc-500">Welchen Ort wolltest du bereits in München die ganze Zeit besuchen, wo nur Erwachsene hin dürfen?</p> <p className="text-lg text-zinc-500">In diesem gleichnahmigen Film spielen &quot;Robin Williams&quot; und später &quot;Dwayne Johnson&quot; eine Hauptrolle?</p>
<RadioGroup onValueChange={handleAnswerChange} value={selectedAnswer} className="flex flex-col items-start justify-start w-full"> <RadioGroup onValueChange={handleAnswerChange} value={selectedAnswer} className="flex flex-col items-start justify-start w-full">
{options.map((option) => ( {options.map((option) => (
<div key={option} className="text-2xl font-bold flex items-center justify-start border border-zinc-300 gap-2 rounded-md p-4 w-full"> <div key={option} className="text-2xl font-bold flex items-center justify-start border border-zinc-300 gap-2 rounded-md p-4 w-full">
@@ -61,10 +52,7 @@ export default function Home() {
</div> </div>
))} ))}
</RadioGroup> </RadioGroup>
<Button onClick={handleSubmit} className="w-full" size="lg" disabled={showNextLink}>Antworten</Button> <Button onClick={handleSubmit} className="w-full" size="lg">Antworten</Button>
{showNextLink && (
<Button onClick={handleNext} className="w-full" size="lg">Nächste Frage</Button>
)}
</div> </div>
<p className="text-sm text-zinc-500"> <p className="text-sm text-zinc-500">
<b>WICHTIG!</b> Merke dir die Antwort. Du wirst die Überraschung selber enthüllen. <b>WICHTIG!</b> Merke dir die Antwort. Du wirst die Überraschung selber enthüllen.