imsdev.github.io/ims-arcade.html at master · imsdev/imsdev.github.io · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- Basic meta -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="geo.country" content="ZZ" />
    <meta name="dcterms.rights" content="� Copyright IBM Corp. 2020" />
    <meta name="dcterms.date" content="2020-07-18" />
    <meta name="keywords" content="IMS Central, IMS Developer, IMS" />
    <meta name="robots" content="index, follow" />

    <!-- Favicon -->
    <link
      id="favicon"
      rel="shortcut icon"
      type="image/x-icon"
      href="wp-content/IMS_logo_small.png"
    />

    <!-- Page title -->
    <title>IMS Arcade</title>

    <!-- Meta -->
    <link rel="canonical" href="ims-arcade.html" />

    <!-- Sheets -->
    <!-- Imported styling -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
    <!-- Migrated stylesheets -->
    <link
      rel="stylesheet"
      id="dwboomer-style-css"
      href="wp-content/themes/boomer-v18/style.css"
      type="text/css"
      media="all"
    />
    <link rel="stylesheet" href="wp-includes/css/www.css" />
    <!-- Pure CSS -->
    <link rel="stylesheet" href="wp-includes/css/pure.css" />
    <link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="wp-includes/css/homepage.css" />
    <link rel="stylesheet" href="wp-includes/css/nav.css" />
    <link rel="stylesheet" href="wp-includes/css/dropnav.css" />
    <link rel="stylesheet" href="wp-includes/css/page.css" />

    <!-- Hotjar Tracking Code for ibm.com/demos &  githhub -->
    <script>
      (function (h, o, t, j, a, r) {
        h.hj =
          h.hj ||
          function () {
            (h.hj.q = h.hj.q || []).push(arguments);
          };
        h._hjSettings = { hjid: 132193, hjsv: 6 };
        a = o.getElementsByTagName("head")[0];
        r = o.createElement("script");
        r.async = 1;
        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
        a.appendChild(r);
      })(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
    </script>

    <!-- Additional styling for content after navigation -->
    <script src="wp-includes/js/jquery.min.js"></script>

    <!-- TipueSearch -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_content.js"></script>
    <script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_set.js"></script>
    <script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch.min.js"></script>

    <!-- delayed search -->
    <script src="jekyll-tipue-search/assets/tipuesearch/delayedsearch.js"></script>

    <!-- Web components -->
    <script
      src="web-components/nav-header/nav-header.js"
      type="module"
    ></script>
    <script
      src="web-components/hero-section/hero-section.js"
      type="module"
    ></script>
    <script
      src="web-components/jump-links/jump-links.js"
      type="module"
    ></script>
    <script
      src="web-components/course-card/course-card.js"
      type="module"
    ></script>
    <script src="web-components/footer/footer.js" type="module"></script>

    <!-- H5P -->
    <script
      type="text/javascript"
      src="h5p-player/main.bundle.js"
      charset="UTF-8"
    ></script>

    <!-- Multiple choice set -->
    <link
      href="interactive-activities/multi-choice-set/multi-choice-set.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://1.www.s81c.com/common/carbon/plex/sans.css"
    />
    <script
      type="module"
      src="https://1.www.s81c.com/common/carbon/web-components/version/v2.37.0/button.min.js"
    ></script>
    <script
      type="module"
      src="https://1.www.s81c.com/common/carbon/web-components/version/v2.37.0/checkbox.min.js"
    ></script>
    <script
      defer
      src="interactive-activities/multi-choice-set/multi-choice-set.js"
    ></script>

    <!-- Fill in the blanks activity -->
    <link
      href="interactive-activities/fill-in-blank/fill-in-blank.css"
      rel="stylesheet"
    />
    <link />
    <script
      defer
      src="interactive-activities/fill-in-blank/fill-in-blank.js"
    ></script>
  </head>

  <body id="ibm-com" class="ibm-com ibm-type">
    <nav-header></nav-header>

    <div id="content" class="main-content">
      <!-- MAIN CONTENT -->
      <main id="main">
        <!-- =========================== Hero =========================== -->
        <hero-section
          name="IMS arcade"
          image="wp-content/icons/icon_game_console.svg"
          section="Learn"
          desc="<p>Have some fun with IMS: test your knowledge or learn something new!</p>
            <p>Look for new quizzes and games each month.</p>"
        ></hero-section>

        <!-- =========================== Jump links =========================== -->
        <jump-links
          links="Quiz, Flip Cards, Crossword, Drag and Drop, Flashcards"
        ></jump-links>

        <!-- =========================== Quiz=========================== -->
        <section id="quiz" class="white-bg card-section">
          <h2>Quiz</h2>
          <div class="activity-container">
            <div class="activity">
              <h3 id="feedback"></h3>
              <div id="mc-quiz" class="quiz"></div>
              <cds-button id="next-btn">Next</cds-button>
            </div>
          </div>
        </section>

        <!-- =========================== Flip Cards =========================== -->
        <section id="flip-cards" class="light-gray-bg card-section">
          <h2>Flip cards</h2>
          <div id="h5p-container-flipc" style="width: 100%"></div>
          <script>
            document.addEventListener("DOMContentLoaded", function () {
              const el = document.getElementById("h5p-container-flipc");
              const options = {
                h5pJsonPath: "h5p-player/h5p-content-flipcards", // Path to the extracted H5P content
                frameJs: "h5p-player/frame.bundle.js", // Path to player's frame.bundle.js
                frameCss: "h5p-player/styles/h5p.css", // Path to player's h5p.css
              };
              new H5PStandalone.H5P(el, options);
            });
          </script>
        </section>

        <!-- =========================== Crossword =========================== -->
        <section id="crossword" class="white-bg card-section">
          <h2>Crossword</h2>
          <div id="h5p-container-cw" style="width: 100%"></div>
          <script>
            document.addEventListener("DOMContentLoaded", function () {
              const el = document.getElementById("h5p-container-cw");
              const options = {
                h5pJsonPath: "h5p-player/h5p-content-crossword-02", // Path to the extracted H5P content
                frameJs: "h5p-player/frame.bundle.js", // Path to player's frame.bundle.js
                frameCss: "h5p-player/styles/h5p.css", // Path to player's h5p.css
              };
              new H5PStandalone.H5P(el, options);
            });
          </script>
        </section>

        <!-- =========================== Drag-and-drop =========================== -->
        <section id="drag-and-drop" class="light-gray-bg card-section">
          <h2>Drag and Drop</h2>
          <div class="game-container">
            <p><strong>Drag the terms to match their definitions.</strong></p>
            <ol>
              <li class="sentence">
                Allows IMS to provide present database data in different ways
                and to have any data redundancy be managed by IMS software:
                <span class="drop-zone"></span>
              </li>
              <li class="sentence">
                Provides an alternate route into the database:
                <span class="drop-zone"></span>
              </li>
              <li class="sentence">
                The only types of segments in the secondary index database where
                the content of specified fields in the source segment is
                duplicated:
                <span class="drop-zone"></span>
              </li>
              <li class="sentence">
                Suppresses certain index entries based on the content of the
                designated field of a source segments:
                <span class="drop-zone"></span>
              </li>
              <li class="sentence">
                Segments that are used to store data that are intended to vary
                in length over time such as text fields:
                <span class="drop-zone"></span>
              </li>
              <li class="sentence">
                Allows applications to see only specific fields within a segment
                but cannot be allowed to see other information within the same
                segment:
                <span class="drop-zone"></span>
              </li>
            </ol>
            <div id="word-bank" class="word-bank">
              <!-- Draggable words will be added here by JavaScript -->
            </div>
            <div class="buttons">
              <cds-button id="check-btn"></cds-button>
              <cds-button id="show-ans-btn">Show solution</cds-button>
            </div>
            <div id="feedback" class="feedback"></div>
          </div>
        </section>

        <!-- =========================== Flashcards =========================== -->
        <section id="flashcards" class="white-bg card-section">
          <h2>Flashcards</h2>
          <div id="h5p-container-fc" style="width: 100%"></div>
          <script>
            document.addEventListener("DOMContentLoaded", function () {
              const el = document.getElementById("h5p-container-fc");
              const options = {
                h5pJsonPath: "h5p-player/h5p-content-flashcards-02", // Path to the extracted H5P content
                frameJs: "h5p-player/frame.bundle.js", // Path to player's frame.bundle.js
                frameCss: "h5p-player/styles/h5p.css", // Path to player's h5p.css
              };
              new H5PStandalone.H5P(el, options);
            });
          </script>
        </section>
      </main>
    </div>

    <!-- Footer -->
    <imscentral-footer></imscentral-footer>
  </body>
</html>