Add tag style site fixes

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,11 @@
+---
+const { id, label } = Astro.props;
+import "./Tag.scss";
+// const tagLabel = `#${label.toLowerCase().replace(/\s+/g, "-")}`;
+---
+
+<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/tags/comp2804/comp2804.md

@@ -1,5 +1,5 @@
 ---
 course: comp2804
-title: Discrete Math II
+title: "COMP 2804: Discrete Structures II"
 tag: comp2804
 ---

src/layouts/Content/Content.scss

@@ -15,9 +15,29 @@
 }
 
 .Question__bar {
+  display: flex;
+  margin-bottom: 1.5rem;
+}
+
+.Question__author {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   margin-bottom: 1.5rem;
 }
 
+.Question__tags {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 3rem;
+  flex-wrap: wrap;
+}
+
+.Question__title__span {
+  font-weight: 600 !important;
+  margin-left: 0.25rem;
+}
+
 .Question__buttons {
   display: flex;
   gap: 0.5rem;

src/layouts/Evaluation/Evaluation.astro

@@ -14,7 +14,7 @@ const { path, page, generate, includeLinks, shuffle } = Astro.props;
     <div><Back href={`/evaluations`} label="Evaluations" /></div>
   </div>
   <h1>
-    {page.data.title}
+    Evaluation: <span class="Question__title__span">{page.data.title}</span>
   </h1>
   <div class="Question__title">
     <i>Author: {page.data.author}</i>

src/pages/courses.astro

@@ -13,21 +13,13 @@ const courseCodes = {
 };
 
 const tags = await getCollection("tags");
-const comp2804Tags = tags
-  .filter((tag) => tag.data.course === "comp2804")
-  .sort((a, b) => a.data.number_of_questions - b.data.number_of_questions);
+const comp2804Tags = tags.filter((tag) => tag.data.course === "comp2804");
 ---
 
 <Layout title="Courses">
   <div class="Question__bar">
     <div><Back href={`/`} label="Home" /></div>
   </div>
-  <!-- <h1>Courses</h1>
-  <p>
-    Practice previous evaluations from Carleton University's Computer Science
-    courses.
-  </p> -->
-  <!-- <div style="margin-top:2.5rem"></div> -->
   <h1>COMP 2804: Discrete Structures II</h1>
   <p>
     Topics include: counting, sequences and sums, discrete probability, basic
@@ -62,7 +54,7 @@ const comp2804Tags = tags
       comp2804Tags.map((tag) => (
         <div>
           <a href={`/practice/tag/${tag.data.tag}`}>
-            <RowCard title={`${tag.data.tag} Questions`} icon="mdi mdi-tag" />
+            <RowCard title={`${tag.data.title} Questions`} icon="mdi mdi-tag" />
           </a>
         </div>
       ))
@@ -74,7 +66,7 @@ const comp2804Tags = tags
     {
       comp2804Evaluations.map((evaluation) => (
         <div>
-          <a href={`/evaluations/${evaluation.tag}`}>
+          <a href={`/evaluations/${evaluation.slug}`}>
             <RowCard
               title={`${evaluation.data.title}`}
               icon="mdi mdi-book-open-variant"

src/pages/practice-by-tag.astro

@@ -22,10 +22,7 @@ const tags = await getCollection("tags");
       tags.map((tag) => (
         <div>
           <a href={`/practice/tag/${tag.data.tag}`}>
-            <RowCard
-              title={`${tag.data.title}} Questions`}
-              icon="mdi mdi-tag"
-            />
+            <RowCard title={`${tag.data.title} Questions`} icon="mdi mdi-tag" />
           </a>
         </div>
       ))

src/pages/practice/tag/[tag].astro

@@ -34,22 +34,25 @@ function formatString(input: string) {
 }
 
 const title = formatString(randomQuestion.data.path);
-
-const tabTitle = tag
-  .slice(9)
-  .replace(/-/g, " ")
-  .replace(/\b\w/g, (c) => c.toUpperCase());
+const tags = await getCollection("tags");
+const tagResource = tags.find((t) => t.data.tag === tag);
 ---
 
-<Layout title={tabTitle}>
+<Layout title={`Practice By Tag: ${tag}`}>
   <div class="Question__bar">
     <div>
       <Back />
     </div>
   </div>
 
-  <h1>{title}</h1>
-
+  <h1>
+    Practice By Tag: <span class="Question__title__span"
+      >{tagResource?.data.title}</span
+    >
+  </h1>
+  <div style="margin-bottom:1.9rem"></div>
+  <i>Question: {title}</i>
+  <div style="margin-bottom:2rem"></div>
   <Evaluation
     questions={[randomQuestion.data.path]}
     generate={true}

src/pages/questions/[...path].astro

@@ -2,7 +2,7 @@
 import MathJax from "@components/MathJax.svelte";
 import Back from "@components/Back/Back.astro";
 import Button from "@components/Button/Button.astro";
-import Pill from "@components/Pill/Pill.astro";
+import Tag from "@components/Tag/Tag.astro";
 import MultipleChoiceQuestion from "@components/MultipleChoiceQuestion/MultipleChoiceQuestion.astro";
 import { getCollection } from "astro:content";
 import { default as Layout } from "src/layouts/Content/Content.astro";
@@ -51,46 +51,53 @@ const question = await loadQuestion();
 const title = formatString(path);
 
 const tags = await getCollection("tags");
-const tagMap = tags.reduce((map, tag) => {
-  map[tag.data.tag] = tag.data.title;
-  return map;
-}, {});
+const tagMap: { [key: string]: string } = tags.reduce(
+  (map, tag) => {
+    map[tag.data.tag] = tag.data.title;
+    return map;
+  },
+  {} as { [key: string]: string },
+);
 ---
 
 <Layout title={title + " Question"}>
   <div class="Question__bar">
     <div><Back /></div>
   </div>
-  <h1>{title}</h1>
-  <Content />
-  <MultipleChoiceQuestion question={question} interactive={false} />
-  <div>
-    {
-      page.data.tags
-        ? page.data.tags.map((tag: string) => (
-            <Pill label={tagMap[tag]} highlight={true} tag={tag} />
-          ))
-        : ""
-    }
+
+  <h1>
+    Question: <span class="Question__title__span">{title}</span>
+  </h1>
+  <div class="Question__author">
+    <i>Author: {page.data.author}</i>
+    <div>
+      <a href={`/questions/solution/${path}`}
+        ><Button
+          icon="mdi mdi-check-bold"
+          disabled={page.data.solution ? false : true}
+        /></a
+      >
+      <a href={`/questions/generator/${path}`}
+        ><Button
+          icon="mdi mdi-creation"
+          disabled={page.data.generator ? false : true}
+        /></a
+      >
+      <a
+        class="Question__contribute"
+        href={`https://github.com/CarletonComputerScienceSociety/questions/blob/main/src/content/questions/${path}/index.md`}
+        ><Button icon="mdi mdi-github" /></a
+      >
+    </div>
   </div>
-  <div class="Question__buttons">
-    <a href={`/questions/solution/${path}`}
-      ><Button
-        label="Solution"
-        disabled={page.data.solution ? false : true}
-      /></a
-    >
-    <a href={`/questions/generator/${path}`}
-      ><Button
-        icon="mdi mdi-creation"
-        label="Practice"
-        disabled={page.data.generator ? false : true}
-      /></a
-    >
-    <a
-      href={`https://github.com/CarletonComputerScienceSociety/questions/blob/main/src/content/questions/${path}/index.md`}
-      ><Button label="Contribute" /></a
-    >
+  <Content />
+  <MultipleChoiceQuestion
+    question={question}
+    interactive={false}
+    displaySolution={false}
+  />
+  <div class="Question__tags">
+    {page.data.tags.map((tag: string) => <Tag id={tag} label={tagMap[tag]} />)}
   </div>
   <MathJax client:load />
 </Layout>