function AnimatedQuizHost({ src, alt }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "absolute bottom-0 left-0 w-[200px] h-[300px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function AnimatedQuizHostStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedQuizHost, { src: "/host.png", alt: "animated quiz show host", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function QuizQuestionHeading({ text }) { return /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, text); } function QuizQuestionHeadingStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuizQuestionHeading, { text: "Quiz Question?", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function AnimatedCharacterDisplay({ src, alt }) { return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "absolute bottom-0 left-0 w-[200px] h-[300px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this })); } function AnimatedCharacterDisplayStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedCharacterDisplay, { src: "/host.png", alt: "animated quiz show host", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function ChoiceButtonSelector({ choices }) { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, choices.map((choice, index)=>{ const choiceName = `choice-${index}`; return /*#__PURE__*/ React.createElement("button", { key: index, className: "px-8 py-4 bg-[#0000ff] text-white font-roboto rounded-md hover:bg-[#0000cc] focus:outline-none", name: choiceName, __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, choice); })); } function ChoiceButtonSelectorStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChoiceButtonSelector, { choices: [ "Option 1", "Option 2", "Option 3", "Option 4" ], __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChoiceButtonSelector, { choices: [ "Yes", "No", "Maybe" ], __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function AnimatedQuizHost2({ src, alt }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "absolute bottom-0 left-0 w-[200px] h-[300px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function AnimatedQuizHost2Story() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AnimatedQuizHost2, { src: "/host.png", alt: "animated quiz show host", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function QuizShowGameScreen({ question, choices, timeRemaining, score }) { return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen bg-cover bg-no-repeat", style: { backgroundImage: 'url("/quiz-show-set.jpg")' }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 right-0 m-4 text-xl font-bold font-roboto text-white", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl md:text-4xl font-bold font-roboto text-center text-white", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, question), /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, choices.map((choice, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "px-8 py-4 bg-blue-600 text-white font-roboto rounded-md hover:bg-blue-700 focus:outline-none", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, choice))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 m-4 text-xl font-bold font-roboto text-white", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Time Remaining: ", timeRemaining, "s"), /*#__PURE__*/ React.createElement(AnimatedQuizHost, { src: "/host.png", alt: "animated quiz show host", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(AnimatedCharacterDisplay, { src: "/character.png", alt: "animated character display", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement(AnimatedQuizHost2, { src: "/host2.png", alt: "animated quiz show host 2", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }))); } function QuizShowGameScreenStory() { const exampleQuestion = "What is the capital of France?"; const exampleChoices = [ "Paris", "London", "Berlin", "Rome" ]; const exampleTimeRemaining = 30; const exampleScore = 1000; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuizShowGameScreen, { question: exampleQuestion, choices: exampleChoices, timeRemaining: exampleTimeRemaining, score: exampleScore, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function AnimatedQuizHost2({ src, alt }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "absolute bottom-0 left-0 w-[200px] h-[300px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function AnimatedQuizHost2Story() { return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(AnimatedQuizHost2, { src: "/host.png", alt: "animated quiz show host", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this })); } function MainComponent() { const exampleQuestion = "What is the capital of France?"; const exampleChoices = [ "Paris", "London", "Berlin", "Rome" ]; const exampleTimeRemaining = 30; const exampleScore = 1000; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(QuizShowGameScreen, { question: exampleQuestion, choices: exampleChoices, timeRemaining: exampleTimeRemaining, score: exampleScore, __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this })); }