[WIP] add quiz with mock

package.json

@@ -19,11 +19,11 @@
     "cssnano": "^6.0.1",
     "svelte": "^4.2.2",
     "tailwindcss": "^3.3.5",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "postcss-preset-env": "^9.3.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.16",
-    "postcss-csso": "^6.0.1",
-    "postcss-preset-env": "^9.3.0"
+    "postcss-csso": "^6.0.1"
   }
 }

src/components/client/SingleAnswerQuiz.svelte

@@ -0,0 +1,86 @@
+<script>
+  let mock = [
+    {
+      question: "What type of framework is Next.js?",
+      answerOptions: [
+        { answer: "Frontend" },
+        { answer: "Backend" },
+        { answer: "FullStack", isCorrect: true },
+        { answer: "None of the above" },
+      ],
+    },
+    {
+      question: "When was Next.js released?",
+      answerOptions: [
+        { answer: "20 September 2019" },
+        { answer: "14 January 2017" },
+        { answer: "25 October 2016", isCorrect: true },
+        { answer: "28 March 2018" },
+      ],
+    },
+    {
+      question: "Which CSS Framework are we using?",
+      answerOptions: [
+        { answer: "Bootstrap" },
+        { answer: "TailwindCSS", isCorrect: true },
+        { answer: "Chakra UI" },
+        { answer: "Bulma CSS" },
+      ],
+    },
+    {
+      question:
+        "Which class in Tailwind is used to set flex direction of column?",
+      answerOptions: [
+        { answer: "col" },
+        { answer: "col-flex" },
+        { answer: "flex-col", isCorrect: true },
+        { answer: "None of the above" },
+      ],
+    },
+  ];
+  let currentIndex = 0;
+  let answer;
+
+  const nextQuestion = (reverse = false) => {
+    if (reverse && currentIndex > 0) {
+      currentIndex--;
+    } else if (!reverse && currentIndex < mock.length - 1) {
+      currentIndex++;
+    }
+  };
+</script>
+
+<fieldset
+  class="flex flex-col items-start w-full border shadow rounded-lg px-8 py-4"
+>
+  <legend class="text-xl">Question {currentIndex + 1} of {mock.length}</legend>
+  <h3 class="text-2xl">{mock[currentIndex].question}</h3>
+  <div class="w-full my-4 space-y-2">
+    {#each mock[currentIndex].answerOptions as option}
+      <div class="flex w-full border rounded-xl shadow-sm">
+        <input
+          type="radio"
+          bind:group={answer}
+          value={option.answer}
+          id={`radio-${option.answer}`}
+          class="ml-8"
+        />
+        <label for={`radio-${option.answer}`} class="w-full p-4"
+          >{option.answer}</label
+        >
+      </div>
+    {/each}
+  </div>
+  <div class="flex flex-row-reverse justify-between w-full">
+    <button
+      on:click={() => nextQuestion()}
+      class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-xl shadow-md"
+      >Next</button
+    >
+    <button
+      on:click={() => nextQuestion(true)}
+      class="bg-transparent hover:bg-purple-500 text-purple-700 font-semibold hover:text-white py-2 px-4 border border-purple-500 hover:border-transparent rounded-xl"
+      >Previous</button
+    >
+  </div>
+</fieldset>

src/pages/kurssit/index.astro

@@ -3,14 +3,15 @@ import Heading2 from "@components/headings/Heading2.astro";
 import Heading1 from "@components/headings/Heading1.astro";
 import Layout from "@layouts/Layout.astro";
 import Link from "@components/common/Link.astro";
+import SingleAnswerQuiz from "@components/client/SingleAnswerQuiz.svelte";
 ---
 
 <Layout title="Kurssit">
   <Heading1>Kurssit</Heading1>
   <p>
-    Niinku eräs koodari aikoinaan sanoi *Keep it stupid simple*. Loput oli
-    historiaa. Tämän sanoman innoittamana kurssin kontentti pyritään pitämään
-    mahdollisimman yksinkertaisena.
+    Oletko kiinnostunut luomaan dynaamisia ja houkuttelevia verkkosivustoja tai
+    -sovelluksia? Tämä kurssi tarjoaa sinulle vankat perusteet web-kehityksestä
+    ja johdannon nykyaikaisiin teknologioihin.
   </p>
   <Heading2>Aloittelijaystävälliset kurssit</Heading2>
   <ul>
@@ -22,4 +23,5 @@ import Link from "@components/common/Link.astro";
     Odota vähän. Ehkä sitä joku päivä jaksaa kirjoittaa vähän haastavempaa
     materiaalia.
   </p>
+  <SingleAnswerQuiz client:visible />
 </Layout>