73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
RadioGroup,
|
|
RadioGroupItem,
|
|
} from "@/components/ui/radio-group";
|
|
|
|
export default function Home() {
|
|
const options = [
|
|
"NH Hannover",
|
|
"Motel One Hannover",
|
|
"Premier Inn Hannover City University",
|
|
"June Six Hotel Hannover City",
|
|
]
|
|
const correctAnswer = "June Six Hotel Hannover City";
|
|
const nextLink = "https://four.christian.miniquiz.your-apps.dev";
|
|
|
|
const [selectedAnswer, setSelectedAnswer] = React.useState<string | null>(null);
|
|
const [showNextLink, setShowNextLink] = React.useState<boolean>(false);
|
|
|
|
const router = useRouter();
|
|
|
|
const handleAnswerChange = (value: string) => {
|
|
setSelectedAnswer(value);
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (!selectedAnswer) {
|
|
alert("Bitte wähle eine Antwort aus!")
|
|
return;
|
|
}
|
|
if (selectedAnswer !== correctAnswer) {
|
|
alert("Falsche Antwort!")
|
|
return;
|
|
}
|
|
alert("Richtige Antwort!")
|
|
setShowNextLink(true);
|
|
};
|
|
|
|
const handleNext = () => {
|
|
router.push(nextLink);
|
|
};
|
|
|
|
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 max-w-2xl w-full gap-8">
|
|
<h1 className="text-4xl font-bold">18. Geburtstag</h1>
|
|
<p className="text-lg text-zinc-500">Welches Hotel in Hannover hat den Namen wie das Datum was im Sommer und in der Mitte des Jahres liegt?</p>
|
|
<RadioGroup onValueChange={handleAnswerChange} value={selectedAnswer} className="flex flex-col items-start justify-start w-full">
|
|
{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">
|
|
<RadioGroupItem value={option} />
|
|
<Label>{option}</Label>
|
|
</div>
|
|
))}
|
|
</RadioGroup>
|
|
<Button onClick={handleSubmit} className="w-full" size="lg" disabled={showNextLink}>Antworten</Button>
|
|
{showNextLink && (
|
|
<Button onClick={handleNext} className="w-full" size="lg">Nächste Frage</Button>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-zinc-500">
|
|
<b>WICHTIG!</b> Merke dir die Antwort. Du wirst die Überraschung selber enthüllen.
|
|
</p>
|
|
</div>
|
|
)
|
|
} |