html.haus/practice.html at main · rchillard/html.haus · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="only light">
  <meta name="Description"
    content="Practice memorizing HTML elements with digital flashcards">
  <title>HTML Haus | Practice</title>
  <link rel="icon" type="image/x-icon" href="img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/sane.css">
  <link rel="stylesheet" type="text/css" href="css/styles.css">
  <link rel="stylesheet" type="text/css" href="css/practice.css">
  <!-- <base href="https://html.haus/"> -->
</head>

<body>
  <header>
    <nav>
      <a id="menu-title" href="index.html">HTML<img class="logo" src="img/house-with-tree.png"
          alt="House with tree icon"></a>
      <ul>
        <li><a href="learn.html">Learn</a></li>
        <li><a href="practice.html">Practice</a></li>
        <li><a href="reference.html">Reference</a></li>
        <li><a href="tools.html">Tools</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Practice</h1>
    <p>
      This tool is a work in progress.  It's essentially digital flash cards for each HTML element, and it uses a learning technique called
      <a href="https://en.wikipedia.org/wiki/Spaced_repetition">spaced repetition</a> to build your knowledge of all the HTML elements.  As
      you learn elements, it will test you more frequently on those you rate difficult to remember.  Give it a try!
    </p>
    <div class="scene">
      <div class="card">
        <div class="card__face card__face--front" id="questionBox">Loading...</div>
        <div class="card__face card__face--back">
          <span id="answerBox"></span>
          <div class="difficulty">
            <label id="easy"><input type="radio" />Easy</label>
            <label id="medium"><input type="radio" />Medium</label>
            <label id="hard"><input type="radio" />Hard</label>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <a href="learn.html">Learn</a>
    <a href="practice.html">Practice</a>
    <a href="reference.html">Reference</a>
    <a href="tools.html">Tools</a>
    <a href="about.html">About</a>
    <a href="index.html"><img alt="House with tree icon" class="logo" src="img/house-with-tree.png"></a>
  </footer>
  <script src="js/practice.js"></script>
</body>

</html>