Big update: add quiz function, new post

public/css/index.css

@@ -134,6 +134,7 @@
 	--link-decoration-thickness: 0.1rem;
 
 	/* Borders */
+	--border-details: 1px solid var(--color-gray-20);
 	--border-hr: 0.5px solid var(--color-gray-20);
 	--border-nav: 1px solid var(--text-color);
 	--border-nav-currentpage: var(--space-xs-s) solid var(--contrast-color);
@@ -263,13 +264,15 @@ main {
 	gap: var(--grid-gutter);
 	grid-template-columns: repeat(var(--grid-columns), 1fr);
 }
+.indexFeature:not(:last-child) {
+	padding-bottom: var(--space-l);
+}
 nav {
 	grid-column: 2 / span 12;
 }
 .now {
 	display: grid;
 	grid-column: var(--span-grid);
-	padding: var(--space-l) 0;
 }
 ol {
 	padding-left: 0;
@@ -277,16 +280,14 @@ ol {
 section {
 	display: grid;
 	grid-column: var(--span-grid);
-	&.full-width-text {
-		p {
-			grid-column: var(--span-grid);
-		}
-		/* Add fleuron to last <p> in section */
-		> p:not(blockquote > p):last-child:after {
-			content: "\2766";
-			display: inline;
-			font-size: var(--step-1);
-		}
+	p {
+		grid-column: var(--span-grid);
+	}
+	/* Add fleuron to last <p> in section */
+	> p:not(blockquote > p):last-child:after {
+		content: "\2766";
+		display: inline;
+		font-size: var(--step-1);
 	}
 }
 ::selection {
@@ -967,6 +968,7 @@ article.post {
 		}
 	}
 }
+
 /* Add fleuron after <p> in article when footnotes are present */
 p:has(+ hr.footnotes-sep):after {
 	content: "\2766";
@@ -974,6 +976,89 @@ p:has(+ hr.footnotes-sep):after {
 	font-size: var(--step-1);
 }
 
+/* Quiz */
+.answerBox {
+	margin-bottom: var(--space-3xs);
+}
+.answersBox > input {
+	display: block;
+}
+details {
+	background-color: var(--card-color);
+	border: var(--border-details);
+	border-radius: var(--border-radius);
+	color: var(--text-color);
+	margin-top: var(--space-s);
+	padding: var(--space-xs);
+	width: 100%;
+	font-size: var(--step--2);
+	font-variation-settings: var(--font-variation-ui);
+	text-transform: uppercase;
+	letter-spacing: var(--ui-letter-spacing);
+	font-family: var(--font-family-ui);
+
+	::marker {
+		content: "+ ";
+	}
+	&[open] p {
+		font-size: var(--step--2);
+		line-height: calc(var(--step--2) * 0.25 + var(--step--2));
+	}
+	&[open] summary::marker {
+		content: "- ";
+	}
+	&[open] summary {
+		border-bottom: var(--border-details);
+		margin-bottom: var(--space-xs);
+		padding-bottom: var(--space-xs);
+	}
+	summary {
+		font-size: var(--step--2);
+		font-variation-settings: var(--font-variation-ui);
+		text-transform: uppercase;
+		letter-spacing: var(--ui-letter-spacing);
+		font-family: var(--font-family-ui);
+	}
+}
+dialog {
+	background-color: var(--card-color);
+	border: none;
+	border-radius: var(--border-radius);
+	box-shadow: var(--box-shadow);
+	width: var(--grid-max-width);
+	h2 {
+		padding-top: 0;
+	}
+	p {
+		color: var(--text-color);
+	}
+	&::backdrop {
+		background-color: var(--contrast-color);
+		opacity: 0.5;
+	}
+	img {
+		max-width: 100%;
+		padding-top: var(--space-s);
+	}
+}
+.questionBox {
+	margin: var(--space-s) 0;
+	figure {
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+}
+.quizQuestion {
+	font-size: var(--step-2);
+	font-variation-settings:
+		"opsz" 50,
+		"wght" 350,
+		"SOFT" 20,
+		"WONK" 1;
+	line-height: calc(var(--step-2) * 0.25 + var(--step-2));
+	padding-bottom: var(--space-s);
+	padding-top: var(--space-s);
+}
 /* Utilities */
 .grid-container {
 	max-width: var(--grid-max-width);

public/js/quiz.js

@@ -0,0 +1,43 @@
+const score = (answers) => {
+	let total = 0;
+	let scores = [];
+	for (let i = 0; i < answers.length; i++) {
+		const questionNumber = answers[i].name;
+		if (answers[i].checked) {
+			total += Number(answers[i].value);
+			scores.push({
+				questionNumber: questionNumber,
+				points: answers[i].value,
+			});
+		}
+	}
+	return { totalPoints: total, scores: scores };
+};
+
+const dishOutConsequences = (consequences, points) => {
+	for (let i = consequences.length - 1; i >= 0; i--) {
+		if (points >= Number(consequences[i].dataset.pointsThreshold)) {
+			consequences[i].showModal();
+			return;
+		}
+	}
+};
+
+const populateDetails = (detailsElement, scores, total) => {
+	detailsElement.innerHTML = `Total Score: ${total} points<br />`;
+	for (let i = 0; i < scores.length; i++) {
+		detailsElement.innerHTML += `<br />Question ${scores[i].questionNumber >= 10 ? scores[i].questionNumber : "0" + scores[i].questionNumber}: ${scores[i].points} points`;
+	}
+};
+
+const handleQuizSubmit = () => {
+	const answers = document.getElementsByClassName("answer");
+	const consequences = document.getElementsByClassName("consequence");
+	const details = document.getElementsByClassName("scoreDetails");
+	const totalPoints = score(answers).totalPoints;
+	const scoreDetails = score(answers).scores;
+	for (let i = 0; i < details.length; i++) {
+		populateDetails(details[i], scoreDetails, totalPoints);
+	}
+	dishOutConsequences(consequences, totalPoints);
+};