mirror of
https://github.com/Noratrieb/womangling.git
synced 2026-01-14 08:55:03 +01:00
introduce: practice
This commit is contained in:
parent
750140d5f7
commit
afefd4b4ae
5 changed files with 210 additions and 14 deletions
35
flashcard.css
Normal file
35
flashcard.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
57
flashcard.js
Normal file
57
flashcard.js
Normal file
|
|
@ -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();
|
||||
17
index.css
17
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 {
|
||||
|
|
|
|||
48
index.html
48
index.html
|
|
@ -18,8 +18,8 @@
|
|||
</p>
|
||||
</noscript>
|
||||
<p>
|
||||
This website will teach you C++ Itanium Symbol Name Mangling. Itanium-style
|
||||
mangling is used on a lot of platforms, including Linux.
|
||||
This website will teach you C++ Itanium Symbol Name Mangling.
|
||||
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,17 +31,39 @@
|
|||
each step to test your knowledge.
|
||||
</p>
|
||||
<div class="center">
|
||||
<ol class="lessons-list">
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<a href="lesson-2.html" class="action-button">Lesson 2: Arguments</a>
|
||||
</li>
|
||||
</ol>
|
||||
<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
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<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
|
||||
>
|
||||
</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>
|
||||
|
|
|
|||
67
practice/primitive-types.html
Normal file
67
practice/primitive-types.html
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue