update drag and drop content and styling

Author: hmillersarah

ims-arcade.html

@@ -161,7 +161,6 @@
         <!-- =========================== Quiz=========================== -->
         <section id="quiz" class="white-bg card-section">
           <h2>Quiz</h2>
-          <h3>IMS topic</h3>
           <div class="activity-container">
             <div class="activity">
               <h3 id="feedback"></h3>
@@ -174,7 +173,6 @@ <h3 id="feedback"></h3>
         <!-- =========================== Flip Cards =========================== -->
         <section id="flip-cards" class="light-gray-bg card-section">
           <h2>Flip cards</h2>
-          <h3>IMS Regions</h3>
           <div id="h5p-container-flipc" style="width: 100%"></div>
           <script>
             document.addEventListener("DOMContentLoaded", function () {
@@ -190,9 +188,8 @@ <h3>IMS Regions</h3>
         </section>
 
         <!-- =========================== Crossword =========================== -->
-        <section id="crossword" class="light-gray-bg card-section">
+        <section id="crossword" class="white-bg card-section">
           <h2>Crossword</h2>
-          <h3>IMS topics</h3>
           <div id="h5p-container-cw" style="width: 100%"></div>
           <script>
             document.addEventListener("DOMContentLoaded", function () {
@@ -208,22 +205,42 @@ <h3>IMS topics</h3>
         </section>
 
         <!-- =========================== Drag-and-drop =========================== -->
-        <section id="drag-and-drop" class="white-bg card-section">
+        <section id="drag-and-drop" class="light-gray-bg card-section">
           <h2>Drag and Drop</h2>
-          <h3>IMS topic</h3>
           <div class="game-container">
-            <p class="sentence">
-              The <span class="drop-zone"></span> stores application and
-              database metadata when IMS managed ACBs are implemented.
-            </p>
-            <p class="sentence">
-              The <span class="drop-zone"></span> stores ACB blocks when IMS
-              managed ACBs are implemented.
-            </p>
-            <p class="sentence">
-              The IMS directory is a <span class="drop-zone"></span> that
-              automatically reclaims space with dynamic space allocation.
-            </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>
@@ -236,9 +253,8 @@ <h3>IMS topic</h3>
         </section>
 
         <!-- =========================== Flashcards =========================== -->
-        <section id="flashcards" class="light-gray-bg card-section">
+        <section id="flashcards" class="white-bg card-section">
           <h2>Flashcards</h2>
-          <h3>IMS topics</h3>
           <div id="h5p-container-fc" style="width: 100%"></div>
           <script>
             document.addEventListener("DOMContentLoaded", function () {

interactive-activities/fill-in-blank/fill-in-blank.css

@@ -4,14 +4,13 @@
 }
 
 .sentence {
-  margin-bottom: 2rem;
+  margin-bottom: 1em;
   line-height: 2;
-  font-size: 1.5em;
 }
 
 .drop-zone {
   display: inline-block;
-  width: 140px; /* Adjust based on expected word length */
+  width: 300px; /* Adjust based on expected word length */
   height: 30px;
   border-bottom: 2px dashed #ccc;
   margin: 0 5px;
@@ -28,10 +27,11 @@
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: 2rem;
   margin-top: 2rem;
   border-top: 2px solid #eee;
   padding-top: 1rem;
+  width: 90%;
 }
 
 .word-item {

interactive-activities/fill-in-blank/fill-in-blank.js

@@ -7,8 +7,24 @@ document.addEventListener("DOMContentLoaded", () => {
   let zoneArr;
 
   // Define the words to be dragged and shuffled
-  const words = ["IMS catalog", "PDS", "PDSE", "IMS directory", "ACBLIB"];
-  const correctWords = ["IMS catalog", "IMS directory", "PDSE"];
+  const words = [
+    "Field-level sensitivity",
+    "Segment-level sensitivity",
+    "Variable length segments",
+    "Fixed length segments",
+    "Logical relationships",
+    "Secondary index",
+    "Sparse secondary index",
+    "Pointer segment",
+  ];
+  const correctWords = [
+    "Logical relationships",
+    "Secondary index",
+    "Pointer segment",
+    "Sparse secondary index",
+    "Variable length segments",
+    "Field-level sensitivity",
+  ];
 
   let draggedItem = null;
   let attemptComplete = false;

interactive-activities/multi-choice-set/multi-choice-set.css

@@ -7,14 +7,14 @@
 .activity-container {
   background-color: #fff;
   width: 100%;
-  padding: 2em;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: center;
 }
 
 .activity {
-  background-color: #fff;
+  background-color: #f9f9f9;
+  padding: 2em 3em;
 }
 
 .quiz h2 {
@@ -30,7 +30,7 @@
 .btn {
   padding: 0.2em 2em 0.2em 0.5em;
   margin: 0.5em 0;
-  border: 2px #fff solid;
+  border: 2px #f9f9f9 solid;
 }
 
 .disable {

interactive-activities/multi-choice-set/multi-choice-set.js

@@ -17,7 +17,7 @@ const questions = [
       { text: "PCB", correct: false },
       { text: "AIB", correct: false },
       { text: "Segment search argument (SSA)", correct: true },
-      { text: "COUNT parameter", correct: true },
+      { text: "COUNT parameter", correct: false },
     ],
   },
   {