introduce: practice

flashcard.css

@@ -0,0 +1,35 @@
+.flash-card {
+  margin-bottom: 10px;
+}
+
+.flashcard-questionee {
+  font-size: 1rem;
+}
+
+.flashcard-option-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-left: 0;
+}
+
+.flashcard-option {
+  width: 250px;
+  font-weight: bold;
+  padding: 10px;
+  background-color: var(--color-primary);
+  color: var(--color-white);
+  border: none;
+  text-decoration: none;
+
+  display: block;
+  cursor: pointer;
+
+  &:hover {
+    background-color: color-mix(in oklab, var(--color-primary), white 15%);
+  }
+}
+
+.flashcard-error {
+  color: var(--color-error);
+}

flashcard.js

@@ -0,0 +1,57 @@
+const randomItem = (not) => {
+  let item;
+
+  do {
+    const idx = Math.floor(Math.random() * window.ITEMS.length);
+    item = window.ITEMS[idx];
+  } while (not && item === not);
+
+  return item;
+};
+
+const infoText = document.querySelector("#info-text");
+
+function next() {
+  infoText.textContent = "";
+  const item = randomItem();
+
+  const mangle = Math.random() > 0.5;
+
+  const question = `What is the ${mangle ? "" : "de"}mangled form of this?`;
+
+  const children = card.querySelectorAll("#card > *");
+  children[0].textContent = question;
+  children[1].textContent = mangle ? item.means : item.mangle;
+
+  const options = [
+    randomItem(item),
+    randomItem(item),
+    randomItem(item),
+    randomItem(item),
+  ];
+  const correctIdx = Math.floor(Math.random() * options.length);
+  options[correctIdx] = item;
+
+  children[2].replaceChildren(
+    ...options.map((opt, i) => {
+      const isCorrect = i === correctIdx;
+
+      const text = document.createElement("li");
+      text.classList.add("flashcard-option");
+      text.textContent = mangle ? opt.mangle : opt.means;
+      text.tabIndex = "0";
+      text.addEventListener("click", () => {
+        if (isCorrect) {
+          infoText.classList.remove("flashcard-error");
+          next();
+        } else {
+          infoText.classList.add("flashcard-error");
+          infoText.textContent = "Incorrect.";
+        }
+      });
+      return text;
+    })
+  );
+}
+
+next();

index.css

@@ -6,6 +6,7 @@ html {
   --color-primary: rebeccapurple;
   --color-white: white;
   --color-error: red;
+  --color-success: green;
 
   height: 100%;
 }
@@ -25,6 +26,9 @@ body {
 
 footer {
   justify-self: flex-end;
+  position: absolute;
+  bottom: 0;
+  margin-bottom: 20px;
 }
 
 .content {
@@ -43,6 +47,18 @@ footer {
   text-decoration: none;
 }
 
+.main-two-columns {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  margin-bottom: 40px;
+}
+
+.column-divider {
+  border: black 1px solid;
+}
+
 .action-button {
   width: 250px;
   font-size: 1rem;
@@ -66,7 +82,6 @@ footer {
   display: flex;
   flex-direction: column;
   gap: 10px;
-
 }
 
 .step {

index.html

@@ -18,8 +18,8 @@
           </p>
         </noscript>
         <p>
-          This website will teach you C++ Itanium Symbol Name Mangling. Itanium-style
+          This website will teach you C++ Itanium Symbol Name Mangling.
-          mangling is used on a lot of platforms, including Linux.
+          Itanium-style mangling is used on a lot of platforms, including Linux.
         </p>
         <p>
           Since C++ mangling (the entire ABI) is considered stable today, you
@@ -31,18 +31,40 @@
           each step to test your knowledge.
         </p>
         <div class="center">
+          <div class="main-two-columns">
+            <div>
+              <h2>Learn</h2>
               <ol class="lessons-list">
                 <li>
-              <a href="lesson-0.html" class="action-button">Lesson 0: C names</a>
+                  <a href="lesson-0.html" class="action-button"
+                    >Lesson 0: C names</a
+                  >
                 </li>
                 <li>
-              <a href="lesson-1.html" class="action-button">Lesson 1: Basics</a>
+                  <a href="lesson-1.html" class="action-button"
+                    >Lesson 1: Basics</a
+                  >
                 </li>
                 <li>
-              <a href="lesson-2.html" class="action-button">Lesson 2: Arguments</a>
+                  <a href="lesson-2.html" class="action-button"
+                    >Lesson 2: Arguments</a
+                  >
                 </li>
               </ol>
             </div>
+            <div class="column-divider"></div>
+            <div>
+              <h2>Practice</h2>
+              <ol class="lessons-list">
+                <li>
+                  <a href="practice/primitive-types.html" class="action-button"
+                    >Primitive Types</a
+                  >
+                </li>
+              </ol>
+            </div>
+          </div>
+        </div>
       </div>
       <footer>
         <button

practice/primitive-types.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../index.css" />
+    <link rel="stylesheet" href="../flashcard.css" />
+    <title>Womangling</title>
+  </head>
+  <body>
+    <main class="main">
+      <div class="content" id="content-area">
+        <h1>
+          <a class="root-link" href="..">Learn C++ Itanium Symbol Mangling</a>
+        </h1>
+        <h2>Practice: Primitive Type Names</h2>
+        <noscript>
+          <p>
+            Warning: You have JavaScript disabled. While the content is still
+            viewable, interactive exercises will not work. Consider enabling
+            JavaScript for this website.
+          </p>
+        </noscript>
+        <div id="card" class="flash-card quiz-section">
+          <p>Which of these is this mangled?</p>
+          <code class="flashcard-questionee"></code>
+          <ul class="flashcard-option-list" aria-live="polite"></ul>
+          <div aria-live="polite" id="info-text"></div>
+        </div>
+      </div>
+    </main>
+    <script>
+      window.ITEMS = [
+        { mangle: "v", means: "void" },
+        { mangle: "w", means: "wchar_t" },
+        { mangle: "b", means: "bool" },
+        { mangle: "c", means: "char" },
+        { mangle: "a", means: "signed char" },
+        { mangle: "h", means: "unsigned char" },
+        { mangle: "s", means: "short" },
+        { mangle: "t", means: "unsigned short" },
+        { mangle: "i", means: "int" },
+        { mangle: "j", means: "unsigned int" },
+        { mangle: "l", means: "long" },
+        { mangle: "m", means: "unsigned long" },
+        { mangle: "x", means: "long long" },
+        { mangle: "y", means: "unsigned long long" },
+        { mangle: "n", means: "__int128", obscure: true },
+        { mangle: "o", means: "unsigned __int128", obscure: true },
+        { mangle: "f", means: "float" },
+        { mangle: "d", means: "double" },
+        { mangle: "e", means: "long double, __float80", obscure: true },
+        { mangle: "g", means: "__float128", obscure: true },
+        { mangle: "z", means: "__float128", obscure: true },
+        { mangle: "Dh", means: "__half (half-precision float)", obscure: true },
+        { mangle: "DF16b", means: "std::bfloat16_t", obscure: true },
+        { mangle: "Di", means: "char32_t", obscure: true },
+        { mangle: "Ds", means: "char16_t", obscure: true },
+        { mangle: "Du", means: "char8_t", obscure: true },
+        { mangle: "Da", means: "auto" },
+        { mangle: "Dc", means: "decltype(auto)" },
+        { mangle: "Dn", means: "std::nullptr_t", obscure: true },
+      ];
+    </script>
+    <script type="module" src="../flashcard.js"></script>
+  </body>
+</html>