wip: quiz UI

Author: sifferhans

frontend/app/assets/styles/main.css

@@ -11,6 +11,8 @@
   --color-accent: #ffaedf;
   --color-accent-contrast: #5d0045;
   --color-on-accent: #5d0045;
+  --color-accent-positive: #9ed63c;
+  --color-accent-negative: #e86a4a;
   --color-background-default: #efefef;
   --color-background-raised: #ffffff;
   --color-background-indent: rgb(0 0 0 / 0.05);
@@ -89,6 +91,8 @@
   --color-accent: #ffaedf;
   --color-accent-contrast: #ffaedf;
   --color-on-accent: #5d0045;
+  --color-accent-positive: #c6ff62;
+  --color-accent-negative: #e86a4a;
   --color-background-default: #222222;
   --color-background-raised: #343434;
   --color-background-indent: rgb(0 0 0 / 0.25);

…p/components/challenge/ChallengeCard.vue …/components/challenges/ChallengeCard.vuefrontend/app/components/challenge/ChallengeCard.vue renamed to frontend/app/components/challenges/ChallengeCard.vue frontend/app/components/challenge/ChallengeCard.vue renamed to frontend/app/components/challenges/ChallengeCard.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { cva } from 'cva'
+
+defineProps<{
+  text: string
+  highlighted?: boolean
+  confirmed?: boolean
+  wrong?: boolean
+  correct?: boolean
+}>()
+
+const classes = cva(
+  'border-2 relative text-label rounded-list p-medium flex gap-list-section-inset text-center justify-center items-center min-h-22',
+  {
+    variants: {
+      highlighted: {
+        true: '',
+        false: '',
+      },
+      confirmed: {
+        true: '',
+        false: '',
+      },
+      wrong: {
+        true: '',
+        false: '',
+      },
+      correct: {
+        true: '',
+        false: '',
+      },
+    },
+    compoundVariants: [
+      {
+        highlighted: false,
+        confirmed: false,
+        class: 'border-border-default',
+      },
+      {
+        highlighted: true,
+        confirmed: false,
+        class: 'border-accent-contrast text-accent-contrast',
+      },
+      {
+        confirmed: true,
+        wrong: true,
+        class: 'border-accent-negative',
+      },
+      {
+        confirmed: true,
+        correct: true,
+        class: 'border-accent-positive',
+      },
+    ],
+  },
+)
+</script>
+
+<template>
+  <button :class="classes({ highlighted, confirmed, wrong, correct })">
+    {{ text }}
+
+    <span
+      v-if="confirmed && wrong"
+      class="absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 text-label text-on-accent bg-accent-negative rounded-full pl-2 pr-3 py-1 flex gap-1 items-center"
+    >
+      <Icon name="lucide:x" class="size-6" />
+      Feil svar
+    </span>
+    <span
+      v-if="confirmed && correct"
+      class="absolute top-0 -translate-y-1/2 left-1/2 -translate-x-1/2 text-label text-on-accent bg-accent-positive rounded-full pl-2 pr-3 py-1 flex gap-1 items-center"
+    >
+      <Icon name="lucide:check" class="size-6" />
+      Riktig svar
+    </span>
+  </button>
+</template>

frontend/app/components/challenges/quiz/QuizAlternative.vue

@@ -36,6 +36,19 @@ const { data, fetching, error } = useChallengePageQuery({
 
     <LoadingState v-if="fetching" />
     <ErrorState v-else-if="error" :error />
-    <pre v-else-if="data">{{ data.challenge }}</pre>
+    <div v-else-if="data" class="gap-medium flex flex-col">
+      <QuizAlternative text="This is an alternative" />
+      <QuizAlternative text="This is a highlighted alternative" highlighted />
+      <QuizAlternative
+        text="This is a confirmed and wrong alternative"
+        confirmed
+        wrong
+      />
+      <QuizAlternative
+        text="This is a confirmed and correct alternative"
+        confirmed
+        correct
+      />
+    </div>
   </PageLayout>
 </template>