feat: add initial support for more advanced game settings

.eleventy.js

@@ -19,6 +19,7 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addLayoutAlias('default', 'layout.njk');
 
   eleventyConfig.addFilter('mdToHtml', markdownToHtml);
+  eleventyConfig.addFilter('csvList', (values) => values.join(', '));
 
   return {
     dir: {

pages/_data/questionData.js

@@ -15,44 +15,51 @@ const getQuestions = async () => {
   const questions = await base('Questions and Answers').select().all();
 
   const publishedQuestions = questions
-    .filter((record) => record.fields.Published || viewDrafts)
-    .map((record) => {
-      const options = [
-        {
-          answer: record.fields.Answer,
-          isCorrect: true,
-        },
-      ];
-
-      if (record.fields['Distractor 1']?.trim()) {
-        options.push({
-          answer: record.fields['Distractor 1'],
-          isCorrect: false,
-        });
-      }
-
-      if (record.fields['Distractor 2']?.trim()) {
-        options.push({
-          answer: record.fields['Distractor 2'],
-          isCorrect: false,
-        });
-      }
-
-      return {
-        ...record.fields,
-        options: options.sort(() => {
-          const sign = Math.round(Math.random()) > 0 ? 1 : -1;
-
-          return sign;
-        }),
-      };
-    });
+		.filter((record) => record.fields.Published || viewDrafts)
+		.map((record, index) => {
+			const options = [
+				{
+					answer: record.fields.Answer,
+					isCorrect: true,
+				},
+			];
+
+			if (record.fields['Distractor 1']?.trim()) {
+				options.push({
+					answer: record.fields['Distractor 1'],
+					isCorrect: false,
+				});
+			}
+
+			if (record.fields['Distractor 2']?.trim()) {
+				options.push({
+					answer: record.fields['Distractor 2'],
+					isCorrect: false,
+				});
+			}
+
+			return {
+				...record.fields,
+				id: record.id,
+				pageNumber: index + 1,
+				options: options.sort(() => {
+					const sign = Math.round(Math.random()) > 0 ? 1 : -1;
+
+					return sign;
+				}),
+			};
+		});
 
   return publishedQuestions;
 };
 
 const getFlashCardQuestions = (questions) =>
-  questions.filter((question) => !question['Multiple Choice Only']);
+	questions
+		.filter((question) => !question['Multiple Choice Only'])
+		.map((question, index) => ({
+			...question,
+			pageNumber: index + 1,
+		}));
 
 const getUniqueCategories = (questions) => {
 	return [

pages/flash-card-questions.ejs

@@ -0,0 +1,5 @@
+---
+permalink: /flash-card-questions.json
+eleventyExcludeFromCollections: true
+---
+<%- JSON.stringify(questionData.flashCardQuestions) -%>

pages/flash-cards/game-settings.njk

@@ -0,0 +1,20 @@
+---
+title: Flash Cards Game Settings
+seo_title: "Flash Cards Game Settings: Trivia11y"
+description: Choose from categories to study using flash cards to test your accessibility knowledge.
+---
+
+{% extends 'layout.njk' %}
+
+{% block content%}
+	{% from 'macros/game-settings.njk' import gameSettings %}
+	{{ gameSettings('Flash Cards Game Settings', questionData.flashCardCategories, 'flash-cards') }}
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		const IS_MULTIPLE_CHOICE = false;
+		const GAME_TYPE = 'flash-cards';
+	</script>
+	<script src="/js/game-settings.js" type="module"></script>
+{% endblock %}

pages/flash-cards/index.njk

@@ -21,14 +21,14 @@ eleventyExcludeFromCollections: true
 <div class="obj-content-width">
   <article>
     <header class="cmp-game-header">
-      <h1 class="cmp-game-header__title">
+      <h1 class="cmp-game-header__title">Question <span data-question-number>{{ questionGroup.pageNumber }}</span> of <span data-question-total>{{ questionGroup.questionTotal }}</span></h2>
+      <h2 class="cmp-game-header__subtitle">
         {% if questionGroup.category !== 'All Questions' %}
           Category: {{ questionGroup.category }}
         {% else %}
-          All Categories
+          {{ questionGroup.question.Tags | csvList }}
         {% endif %}
       </h1>
-      <h2 class="cmp-game-header__question-count">Question <span data-question-number>{{ questionGroup.pageNumber }}</span> of {{ questionGroup.questionTotal }}</h2>
     </header>
     {% from 'macros/flash-card.njk' import flashCard %}
     {{ flashCard(questionGroup.question) }}

pages/index.njk

@@ -20,18 +20,38 @@ description: A quiz game and study tool to help those at all skill levels to lea
 			Choose a game format and then select a category to help you test your knowledge: Flash Cards for reviewing what you know, Short Answer questions for confirming you actually know your stuff, and Multiple Choice for simulating test conditions.
 		</p>
 
-		{% from 'macros/categories.njk' import categories %}
-		<div class="obj-game-type">
-			<div class="obj-game-type__group">
-				{{ categories('flash-cards', 'Flash Cards', questionData.flashCardCategories) }}
-			</div>
-			<div class="obj-game-type__group">
-				{{ categories('short-answer', 'Short Answer', questionData.flashCardCategories) }}
-			</div>
-			<div class="obj-game-type__group">
-				{{ categories('multiple-choice', 'Multiple Choice', questionData.categories) }}
-			</div>
-		</div>
+		<ul class="cmp-categories">
+			<li class="cmp-categories__item">
+				<a href="/flash-cards/game-settings/" class="cmp-categories__link">
+					Flash Cards
+				</a>
+			</li>
+			<li class="cmp-categories__item">
+				<a href="/flash-cards/all-questions/1/" class="cmp-categories__link cmp-categories__link--alternative" data-game-type="flash-cards">
+					Flash Cards quick start (all categories, 50 questions max)
+				</a>
+			</li>
+			<li class="cmp-categories__item">
+				<a href="/short-answer/game-settings/" class="cmp-categories__link">
+					Short Answer
+				</a>
+			</li>
+			<li class="cmp-categories__item">
+				<a href="/short-answer/all-questions/1/" class="cmp-categories__link cmp-categories__link--alternative" data-game-type="short-answer">
+					Short Answer quick start (all categories, 50 questions max)
+				</a>
+			</li>
+			<li class="cmp-categories__item">
+				<a href="/multiple-choice/game-settings/" class="cmp-categories__link">
+					Multiple Choice
+				</a>
+			</li>
+			<li class="cmp-categories__item">
+				<a href="/multiple-choice/all-questions/1/" class="cmp-categories__link cmp-categories__link--alternative" data-game-type="multiple-choice">
+					Multiple Choice quick start (all categories, 50 questions max)
+				</a>
+			</li>
+		</ul>
 	</div>
 {% endblock %}
 

pages/multiple-choice/game-settings.njk

@@ -0,0 +1,20 @@
+---
+title: Multiple Choice Game Settings
+seo_title: "Multiple Choice Game Settings: Trivia11y"
+description: Choose from categories to study using multiple choice questions to test your accessibility knowledge.
+---
+
+{% extends 'layout.njk' %}
+
+{% block content%}
+	{% from 'macros/game-settings.njk' import gameSettings %}
+	{{ gameSettings('Multiple Choice Game Settings', questionData.categories, 'multiple-choice') }}
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		const IS_MULTIPLE_CHOICE = true;
+		const GAME_TYPE = 'multiple-choice';
+	</script>
+	<script src="/js/game-settings.js" type="module"></script>
+{% endblock %}

pages/multiple-choice/index.njk

@@ -22,14 +22,14 @@ eleventyExcludeFromCollections: true
 <div class="obj-content-width">
   <article>
     <header class="cmp-game-header">
-      <h1 class="cmp-game-header__title">
+      <h1 class="cmp-game-header__title">Question <span data-question-number>{{ questionGroup.pageNumber }}</span> of <span data-question-total>{{ questionGroup.questionTotal }}</span></h2>
+      <h2 class="cmp-game-header__subtitle">
         {% if questionGroup.category !== 'All Questions' %}
           Category: {{ questionGroup.category }}
         {% else %}
-          All Categories
+          {{ questionGroup.question.Tags | csvList }}
         {% endif %}
       </h1>
-      <h2 class="cmp-game-header__question-count">Question <span data-question-number>{{ questionGroup.pageNumber }}</span> of {{ questionGroup.questionTotal }}</h2>
     </header>
 
     {% from 'macros/multiple-choice.njk' import multipleChoice %}

pages/short-answer/game-settings.njk

@@ -0,0 +1,20 @@
+---
+title: Short Answer Game Settings
+seo_title: "Short Answer Game Settings: Trivia11y"
+description: Choose from categories to study using short answer questions to test your accessibility knowledge.
+---
+
+{% extends 'layout.njk' %}
+
+{% block content%}
+	{% from 'macros/game-settings.njk' import gameSettings %}
+	{{ gameSettings('Short Answer Game Settings', questionData.flashCardCategories, 'short-answer') }}
+{% endblock %}
+
+{% block scripts %}
+	<script>
+		const IS_MULTIPLE_CHOICE = false;
+		const GAME_TYPE = 'short-answer';
+	</script>
+	<script src="/js/game-settings.js" type="module"></script>
+{% endblock %}

pages/short-answer/index.njk

@@ -21,14 +21,14 @@ eleventyExcludeFromCollections: true
   <div class="obj-content-width">
     <article>
       <header class="cmp-game-header">
-      <h1 class="cmp-game-header__title">
-        {% if questionGroup.category !== 'All Questions' %}
-          Category: {{ questionGroup.category }}
-        {% else %}
-          All Categories
-        {% endif %}
-      </h1>
-        <h2 class="cmp-game-header__question-count">Question <span data-question-number>{{ questionGroup.pageNumber }}</span> of {{ questionGroup.questionTotal }}</h2>
+        <h1 class="cmp-game-header__title">Question <span data-question-number>{{ questionGroup.pageNumber }}</span> of <span data-question-total>{{ questionGroup.questionTotal }}</span></h2>
+        <h2 class="cmp-game-header__subtitle">
+          {% if questionGroup.category !== 'All Questions' %}
+            Category: {{ questionGroup.category }}
+          {% else %}
+            {{ questionGroup.question.Tags | csvList }}
+          {% endif %}
+        </h1>
       </header>
 
       {% from 'macros/short-answer.njk' import shortAnswer %}

src/css/components/_button.scss

@@ -0,0 +1,10 @@
+.cmp-button {
+	cursor: pointer;
+	padding: 0.5rem 1rem;
+	background-color: var(--background-color);
+	color: var(--text-color);
+	font-size: clamp(1rem, 1rem + 1vw, 2rem);
+	border: 0.125rem solid var(--text-color);
+	border-radius: 0.25rem;
+	box-shadow: 0.25rem 0.25rem 0 0 var(--shadow);
+}

src/css/components/_categories.scss

@@ -27,6 +27,10 @@
     align-items: center;
     transition: color 150ms ease-in-out, text-decoration-color 150ms ease-in-out;
 
+    &--alternative {
+      font-size: clamp(0.875rem, 0.875rem + 0.5vw, 1.125rem);
+    }
+
     &:hover {
       color: var(--foundry-culture-base);
       text-decoration-color: hsl(var(--text-color-hsl) / 0%);

src/css/components/_checkbox.scss

@@ -0,0 +1,28 @@
+.cmp-checkbox {
+	&__grid {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 1rem 2rem;
+
+		> div:first-child {
+			grid-column: 1 / -1;
+		}
+
+		@container (min-width: 36rem) {
+			grid-template-columns: auto 1fr;
+		}
+	}
+
+	&__wrapper {
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem);
+	}
+
+	&__input {
+		accent-color: var(--link-color);
+		height: 0.8em;
+		width: 0.8em;
+	}
+}

src/css/components/_game-header.scss

@@ -6,7 +6,7 @@
 		margin: 0;
 	}
 
-	&__question-count {
+	&__subtitle {
 		margin: 0;
 		font-weight: 400;
 		font-size: clamp(1rem, var(--size) + 0.5vw, 1.5rem);

src/css/components/_inline-form.scss

@@ -25,15 +25,4 @@
     border: 0.125rem solid var(--text-color);
     border-radius: 0.25rem;
   }
-
-  &__button {
-    cursor: pointer;
-    padding: 0.5rem 1rem;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    font-size: clamp(1rem, 1rem + 1vw, 2rem);
-    border: 0.125rem solid var(--text-color);
-    border-radius: 0.25rem;
-    box-shadow: 0.25rem 0.25rem 0 0 var(--shadow);
-  }
 }

src/css/elements/_fieldset-legend.scss

@@ -0,0 +1,12 @@
+fieldset {
+	container: fieldset / inline-size;
+	border: none;
+	margin: 0;
+	padding: 0;
+}
+
+legend {
+	display: block;
+	margin-block-end: 0.5rem;
+	font-size: clamp(1rem, 1rem + 1vw, 2rem);
+}