fredtombs.com/questions.html at main · gigeresk/fredtombs.com · 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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <title>Technical Question Bank — Fred Tombs</title>
      <meta property="og:title" content="Technical Question Bank">
      <meta property="og:image" content="images/whirlpool.jpg">
      <meta name="twitter:card" content="summary_large_image">
      <link rel="icon" type="image/svg+xml" href="favicon.svg">
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <header>
         <h1>
            <a href="index.html">Fred Tombs</a>
         </h1>
         <nav>
            <a href="index.html#technical">Technical Projects</a>
            <a href="index.html#creative">Creative Projects</a>
            <a href="index.html#books">Book Recommendations</a>
            <a href="index.html#friends">Friends</a>
         </nav>
      </header>
      <main>
         <section id="home">
            <p><a href="index.html#technical">← Technical Projects</a></p>
            <h2>Technical Question Bank</h2>
           <div id="quiz">Loading…</div>
         </section>
      </main>
      <script>
        fetch('questions.json')
          .then(function (r) {
            if (!r.ok) throw new Error(r.status);
            return r.json();
          })
          .then(render)
          .catch(function () {
            document.getElementById('quiz').textContent =
              'Could not load questions.json (it needs to be served over HTTP, not opened as a file).';
          });

        function render(items) {
          var root = document.getElementById('quiz');
          root.textContent = '';

          var order = [];
          var byTopic = {};
          items.forEach(function (it) {
            var t = it.topic || 'Uncategorized';
            if (!byTopic[t]) { byTopic[t] = []; order.push(t); }
            byTopic[t].push(it);
          });

          order.forEach(function (t) {
            var h = document.createElement('h3');
            h.textContent = t;
            root.appendChild(h);

            var ol = document.createElement('ol');
            byTopic[t].forEach(function (it) {
              var li = document.createElement('li');
              var d = document.createElement('details');
              var s = document.createElement('summary');
              fmt(s, it.question);
              var a = document.createElement('div');
              a.className = 'answer';
              fmt(a, it.answer);
              d.appendChild(s);
              d.appendChild(a);
              li.appendChild(d);
              ol.appendChild(li);
            });
            root.appendChild(ol);
          });
        }

        // Escape HTML, then render `backtick` spans as <code>.
        function fmt(el, text) {
          el.innerHTML = String(text)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/`([^`]+)`/g, '<code>$1</code>');
        }
      </script>
   </body>
</html>