fix: Fixed bug with modal and sonification tracking within detail element.

src/components/DetailElement.jsx

@@ -123,11 +123,23 @@ const touchEvent = function (event) {
   }
 };
 
-function DetailElement({ sonificationType, children }) {
+function DetailElement({ sonificationType, sonificationEnabled, children }) {
   type = sonificationType;
 
   return (
-    <div onClick={() => {}} onTouchStart={touchEvent} onTouchMove={touchEvent}>
+    <div
+      onClick={() => {}}
+      onTouchStart={(event) => {
+        if (sonificationEnabled) {
+          touchEvent(event);
+        }
+      }}
+      onTouchMove={(event) => {
+        if (sonificationEnabled) {
+          touchEvent(event);
+        }
+      }}
+    >
       <Collapse.Group id="collapseGroup">{children}</Collapse.Group>
     </div>
   );

src/pages/study_site_1/StartPage1.jsx

@@ -28,7 +28,7 @@ function StartPage1({ redirectLoc }) {
       <Spacer h={1} />
       <h3>Frequently Asked Questions</h3>
       <Spacer h={2} />
-      <DetailElement sonificationType="earcon">
+      <DetailElement sonificationType="earcon" sonificationEnabled={true}>
         <Collapse title="Under what conditions can I rebook?">
           <Text>
             You can change your flight bookings providing the fare conditions of

src/pages/study_site_4/StartPage4.jsx

@@ -11,6 +11,7 @@ import DetailElement from "../../components/DetailElement";
 
 function StartPage4({ redirectLoc }) {
   const [modalVisible, setModalVisible] = useState(false);
+  const [sonificationEnabled, setSonificationEnabled] = useState(true);
 
   var saveMouseLog = function () {
     pushToMouseLog(getHeatmapData());
@@ -18,6 +19,7 @@ function StartPage4({ redirectLoc }) {
 
   const closeModal = () => {
     setModalVisible(false);
+    setSonificationEnabled(true);
   };
 
   const icelandicPhrasebook = (
@@ -85,7 +87,10 @@ function StartPage4({ redirectLoc }) {
     bannerTranslationKey;
 
   const collapseGroup = (
-    <DetailElement sonificationType="model">
+    <DetailElement
+      sonificationType="model"
+      sonificationEnabled={sonificationEnabled}
+    >
       <Collapse title="Regions and Cities" id="testElement">
         <Text>
           Iceland is divided into several regions, each with its own unique
@@ -140,6 +145,7 @@ function StartPage4({ redirectLoc }) {
         <button
           onClick={() => {
             setModalVisible(true);
+            setSonificationEnabled(false);
           }}
         >
           Icelandic Phrasebook