Add tags to questions page (#19)

* Pills

- Created Pill component
- Added pill component to questions webpage
- Added pill component to solution webpage as well
- Updated Color

* Created Tags Collection

- Filled a newly created folder with tags
- Created python program to updated tags if program is run
- Updated tag collection format
- Hardcoded lists of tags were erased from different pages that used getStaticPath and others

* Update script formatting

* Add tag style site fixes

* Remove comment

---------

Co-authored-by: Matthew M-B <[email protected]>

Author: JohnLu2004

src/components/MultipleChoiceQuestion/MultipleChoiceQuestion.astro

@@ -1,5 +1,5 @@
 ---
-const { index, question, interactive } = Astro.props;
+const { index, question, interactive, displaySolution } = Astro.props;
 import MultipleChoiceQuestionOption from "./MultipleChoiceQuestionOption.astro";
 import "./MultipleChoiceQuestion.scss";
 const numberString =
@@ -16,6 +16,7 @@ const numberString =
         <MultipleChoiceQuestionOption
           option={option}
           interactive={interactive}
+          displaySolution={displaySolution}
           questionIndex={index}
           optionIndex={optionIndex}
         />

src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.astro

@@ -1,16 +1,18 @@
 ---
-const { questionIndex, optionIndex, option, interactive } = Astro.props;
+const { questionIndex, optionIndex, option, interactive, displaySolution } =
+  Astro.props;
 import "./MultipleChoiceQuestionOption.scss";
 
 const letterOptions = ["a", "b", "c", "d", "e"];
+const initiallyDisplaySelectedSolution = displaySolution && option.correct;
 ---
 
 <div
-  id={`MultipleChoiceQuestion-${questionIndex}-option-${optionIndex}`}
+  id={`MultipleChoiceQuestion-${questionIndex}-option-${optionIndex}}`}
   class={`MultipleChoiceQuestionOption`}
   data-correct={option.correct ? "true" : "false"}
-  data-selected="false"
-  data-revealed={interactive ? "false" : "true"}
+  data-selected={initiallyDisplaySelectedSolution ? "true" : "false"}
+  data-revealed={displaySolution ? "true" : "false"}
   data-interactive={interactive ? "true" : "false"}
 >
   <div class="MultipleChoiceQuestionOption__letter">

src/components/MultipleChoiceQuestion/MultipleChoiceQuestionOption.scss

@@ -17,9 +17,9 @@
   &:hover {
     &[data-interactive="true"] {
       background-color: #ededed;
-    }
-    &[data-selected="false"] {
-      cursor: pointer;
+      &[data-selected="false"] {
+        cursor: pointer;
+      }
     }
   }
 

src/components/Tag/Tag.astro

@@ -0,0 +1,10 @@
+---
+const { id, label } = Astro.props;
+import "./Tag.scss";
+---
+
+<a href={`/practice/tag/${id}`}>
+  <button class="Tag">
+    <div class="Tag__label">{label}</div>
+  </button>
+</a>

src/components/Tag/Tag.scss

@@ -0,0 +1,26 @@
+.Tag {
+  border-radius: 0.7rem;
+  border-width: 0px;
+  background-color: #efefef;
+  color: #3a3a3a;
+  transition: all 0.15s;
+  font-weight: 600;
+  font-size: 0.85rem;
+  cursor: pointer;
+  padding: 0.3rem 0.95rem;
+  height: 1.9rem;
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+
+  &:hover {
+    color: white;
+    background-color: #ff4d4d;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+  }
+}

src/content/config.ts

@@ -24,7 +24,17 @@ const evaluationCollection = defineCollection({
   }),
 });
 
+const tagCollection = defineCollection({
+  type: "content",
+  schema: z.object({
+    course: z.string(),
+    tag: z.string(),
+    title: z.string(),
+  }),
+});
+
 export const collections = {
   questions: questionCollection,
   evaluations: evaluationCollection,
+  tags: tagCollection,
 };