feat: Added sonification "hooks".

src/components/DetailElement.jsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { Collapse } from "@geist-ui/core";
+import {
+  playDetailEarconSonification,
+  playDetailModelSonification,
+} from "../core/audio/AudioHandler";
+
+var type = "";
+
+const getParentCollapseElement = function (el) {
+  const parentElement = el.parentElement;
+  const containsCollapseClass = parentElement.classList.contains("collapse");
+  return containsCollapseClass
+    ? parentElement
+    : getParentCollapseElement(parentElement);
+};
+
+const getContainerNode = function (parent) {
+  const children = parent.childNodes;
+
+  for (var child of children) {
+    if (child.classList.contains("container")) {
+      return child;
+    }
+  }
+
+  // Should never reach this...
+  return parent;
+};
+
+const calculateDensities = function (el) {
+  var textLength = 0;
+  var linkAmount = 0;
+  var listAmount = 0;
+  var textDensity = 0;
+  var linkDensity = 0;
+
+  for (var n of el.childNodes) {
+    if (n.nodeType === 3) {
+      textLength += n.nodeValue.length;
+    }
+
+    if (n.nodeName === "A") {
+      linkAmount += 1;
+    }
+
+    if (n.nodeName === "UL") {
+      listAmount += 1;
+    }
+  }
+
+  if (textLength < 200 && textLength > 100) {
+    textDensity = 3;
+  } else if (textLength < 100) {
+    textDensity = 4;
+  } else if (textLength === 0) {
+    textDensity = 0;
+  }
+
+  if (linkAmount > 3) {
+    linkDensity = 4;
+  } else if (linkAmount === 2 || linkAmount === 3) {
+    linkDensity = 3;
+  } else if (linkAmount === 1) {
+    linkDensity = 2;
+  }
+
+  return { textDensity: textDensity, linkDensity: linkDensity };
+};
+
+const touchEvent = function (event) {
+  const eventElement = event.target;
+  const parentCollapseElement = getParentCollapseElement(eventElement);
+  const contentNode = getContainerNode(parentCollapseElement);
+  const densities = calculateDensities(contentNode);
+
+  if (type === "model") {
+    playDetailModelSonification();
+  } else if (type === "earcon") {
+    playDetailEarconSonification();
+  }
+};
+
+function DetailElement({ sonificationType, children }) {
+  type = sonificationType;
+
+  return (
+    <div
+      onClick={() => {}}
+      onTouchStart={touchEvent}
+      onTouchMove={touchEvent}
+    >
+      <Collapse.Group id="collapseGroup">{children}</Collapse.Group>
+    </div>
+  );
+}
+
+export default DetailElement;

src/components/ScrollableTab.jsx

@@ -3,16 +3,21 @@ import { Tabs, Tab } from "react-tabs-scrollable";
 import "react-tabs-scrollable/dist/rts.css";
 import { getHeatmapData } from "./webpage_container/StudySite";
 import { pushToMouseLog } from "../core/log/SensorLogger";
-import { playTabModelSonification } from "../core/audio/AudioHandler";
+import {
+  playTabEarconSonification,
+  playTabModelSonification,
+} from "../core/audio/AudioHandler";
 import { Divider } from "@geist-ui/core";
 
 var amountTabs = 0;
 var reachedEndValue = false;
 var rightSideEnd = true;
 var endElement = amountTabs;
+var type = "";
 
-function ScrollableTab({ onActiveTabChange, children }) {
+function ScrollableTab({ onActiveTabChange, sonificationType, children }) {
   const [activeTab, setActiveTab] = useState(0);
+  type = sonificationType;
 
   const saveMouseLog = function () {
     pushToMouseLog(getHeatmapData());
@@ -63,7 +68,11 @@ function ScrollableTab({ onActiveTabChange, children }) {
       reachedEndValue = true;
     }
 
-    playTabModelSonification();
+    if (type === "model") {
+      playTabModelSonification();
+    } else if (type === "earcon") {
+      playTabEarconSonification();
+    }
 
     if (reachedEndValue && endValueVisible) {
       //this.playChordEndSound();

src/core/audio/AudioHandler.jsx

@@ -19,6 +19,13 @@ const setRotationRamp = (panner, angle, rampTime) => {
 };
 
 export function playTabEarconSonification() {
+  var loop = new Tone.Loop((time) => {
+    drumSynth.triggerAttackRelease("C3", "4n", time);
+  }, "4n");
+  loop.iterations = 2;
+  loop.start();
+  drumSynth.context.resume();
+  Tone.Transport.start();
   pushToSonificationLog("tab_earcon");
 }
 
@@ -34,9 +41,23 @@ export function playTabModelSonification() {
 }
 
 export function playDetailEarconSonification() {
+  var loop = new Tone.Loop((time) => {
+    drumSynth.triggerAttackRelease("C3", "4n", time);
+  }, "4n");
+  loop.iterations = 2;
+  loop.start();
+  drumSynth.context.resume();
+  Tone.Transport.start();
   pushToSonificationLog("detail_earcon");
 }
 
 export function playDetailModelSonification() {
+  var loop = new Tone.Loop((time) => {
+    drumSynth.triggerAttackRelease("C3", "4n", time);
+  }, "4n");
+  loop.iterations = 2;
+  loop.start();
+  drumSynth.context.resume();
+  Tone.Transport.start();
   pushToSonificationLog("detail_model");
 }

src/pages/study_site_1/StartPage1.jsx

@@ -6,6 +6,7 @@ import {
 } from "../../components/webpage_container/StudySite";
 import { pushToMouseLog } from "../../core/log/SensorLogger";
 import { Collapse, Text, Spacer } from "@geist-ui/core";
+import DetailElement from "../../components/DetailElement";
 
 function StartPage1({ redirectLoc }) {
   var saveMouseLog = function () {
@@ -27,7 +28,7 @@ function StartPage1({ redirectLoc }) {
       <Spacer h={1} />
       <h3>Frequently Asked Questions</h3>
       <Spacer h={2} />
-      <Collapse.Group>
+      <DetailElement sonificationType="earcon">
         <Collapse title="Under what conditions can I rebook?">
           <Text>
             You can change your flight bookings providing the fare conditions of
@@ -144,7 +145,7 @@ function StartPage1({ redirectLoc }) {
             goodies, discounts or free BudgetBird flight tickets.
           </Text>
         </Collapse>
-      </Collapse.Group>
+      </DetailElement>
     </StudySite>
   );
 }

src/pages/study_site_2/StartPage2.jsx

@@ -30,16 +30,16 @@ import HotelFlights from "./tab_content/HotelFlights";
 import HotelCatering from "./tab_content/HotelCatering";
 
 const tabContent = [
-  (<HotelFeatures />),
-  (<HotelFacilities />),
-  (<HotelLocation />),
-  (<HotelFlights />),
-  (<HotelRooms />),
-  (<HotelCatering />),
+  <HotelFeatures />,
+  <HotelFacilities />,
+  <HotelLocation />,
+  <HotelFlights />,
+  <HotelRooms />,
+  <HotelCatering />,
   "",
   "",
-  (<HotelRatings />),
-  (<HotelInformation />),
+  <HotelRatings />,
+  <HotelInformation />,
 ];
 
 function StartPage2() {
@@ -65,7 +65,10 @@ function StartPage2() {
       <Spacer h={3} />
       <h4>Hotel Le Laboratoire</h4>
       {tabContent[activeTabIndex]}
-      <ScrollableTab onActiveTabChange={onActiveTabChange}>
+      <ScrollableTab
+        onActiveTabChange={onActiveTabChange}
+        sonificationType="model"
+      >
         <Tab actionType="text">
           <Flag viewBox="0 -8 24 32" size={18} />
           <Spacer inline w={0.35} />

src/pages/study_site_3/StartPage3.jsx

@@ -67,7 +67,10 @@ function StartPage3({ redirectLoc }) {
       <Spacer h={1} />
       <h2>Software Engineering</h2>
       {tabContent[activeTabIndex]}
-      <ScrollableTab onActiveTabChange={onActiveTabChange}>
+      <ScrollableTab
+        onActiveTabChange={onActiveTabChange}
+        sonificationType="earcon"
+      >
         <Tab actionType="text">
           <Search viewBox="0 -8 24 32" size={18} />
           <Spacer inline w={0.35} />

src/pages/study_site_4/StartPage4.jsx

@@ -1,20 +1,99 @@
-import React, { useState } from "react";
-import { getTranslation } from "../../core/i18n/I18NHandler";
+import React, { useEffect, useRef, useState } from "react";
+import ReactDOM from "react-dom";
 import WebpageBanner from "../../components/webpage_container/WebpageBanner";
 import {
   StudySite,
   getHeatmapData,
 } from "../../components/webpage_container/StudySite";
-import { pushToMouseLog, getSensorLog } from "../../core/log/SensorLogger";
+import { pushToMouseLog } from "../../core/log/SensorLogger";
 import { Collapse, Text, Spacer } from "@geist-ui/core";
 import PopupModal from "../../components/PopupModal";
+import {
+  playDetailModelSonification,
+  playTabModelSonification,
+} from "../../core/audio/AudioHandler";
+import DetailElement from "../../components/DetailElement";
 
 function StartPage4({ redirectLoc }) {
   const [modalVisible, setModalVisible] = useState(false);
+  const [elementOpened, setElementOpened] = useState(false);
+
+  const handleClick = () => {
+    let textLength = 0;
+    let linkAmount = 0;
+    let textDensity = 2;
+    let linkDensity = 0;
+    let listAmount = 0;
+
+    /*
+    if (!detailNode.open && !elementOpened) {
+      for (let n of detailNode.childNodes) {
+        if (n.nodeType === 3) {
+          textLength += n.nodeValue.length;
+        }
+        if (n.nodeName === "A") {
+          linkAmount += 1;
+        }
+        if (n.nodeName === "UL") {
+          listAmount += 1;
+        }
+      }
+
+      if (textLength < 200 && textLength > 100) {
+        textDensity = 3;
+      } else if (textLength < 100) {
+        textDensity = 4;
+      } else if (textLength === 0) {
+        textDensity = 0;
+      }
+
+      if (linkAmount > 3) {
+        linkDensity = 4;
+      } else if (linkAmount === 2 || linkAmount === 3) {
+        linkDensity = 3;
+      } else if (linkAmount === 1) {
+        linkDensity = 2;
+      }
+
+      playTabModelSonification(textDensity, linkDensity);
+    }*/
+
+    //playTabModelSonification(textDensity, linkDensity);
+
+    /*
+    if (detailNode.open) {
+      setElementOpened(true);
+    }
+    */
+    playDetailModelSonification();
+  };
+
+  useEffect(() => {
+    if (detailNode) {
+      document
+        .getElementById("collapseGroup")
+        .addEventListener("mouseover", handleClick);
+      document
+        .getElementById("testElement")
+        .addEventListener("touchmove", handleClick);
+      //detailNode.addEventListener("touchstart", handleClick);
+    }
+
+    return () => {
+      if (detailNode) {
+        document
+          .getElementById("collapseGroup")
+          .removeEventListener("mouseover", handleClick);
+        document
+          .getElementById("testElement")
+          .removeEventListener("touchmove", handleClick);
+        //detailNode.removeEventListener("touchstart", handleClick);
+      }
+    };
+  }, [elementOpened]);
 
   var saveMouseLog = function () {
     pushToMouseLog(getHeatmapData());
-    //window.location.href = "./" + redirectLoc;
   };
 
   const closeModal = () => {
@@ -23,11 +102,21 @@ function StartPage4({ redirectLoc }) {
 
   const icelandicPhrasebook = (
     <ul>
-      <li><i>Góðan daginn.</i> → Good day.</li>
-      <li><i>Takk (fyrir).</i> → Thank you.</li>
-      <li><i>Halló.</i> → Hello.</li>
-      <li><i>Hjálp!</i> → Help!</li>
-      <li><i>Ekkert mál.</i> → You're welcome.</li>
+      <li>
+        <i>Góðan daginn.</i> → Good day.
+      </li>
+      <li>
+        <i>Takk (fyrir).</i> → Thank you.
+      </li>
+      <li>
+        <i>Halló.</i> → Hello.
+      </li>
+      <li>
+        <i>Hjálp!</i> → Help!
+      </li>
+      <li>
+        <i>Ekkert mál.</i> → You're welcome.
+      </li>
     </ul>
   );
 
@@ -35,6 +124,235 @@ function StartPage4({ redirectLoc }) {
   // IS THAT OKAY???
   // TODO ALSO THINK WHAT TO DO WITH OUT LINKS???
 
+  const redirectPageStr = "./redirectPage/";
+  const bannerTranslationKey = "/task_4_info";
+
+  const ferryLink =
+    redirectPageStr +
+    encodeURIComponent(
+      "https://visitwestmanislands.com/tour/ferry-landeyjahofn-to-vestmannaeyjar/"
+    ) +
+    bannerTranslationKey;
+
+  const keflavikLink =
+    redirectPageStr +
+    encodeURIComponent("https://www.isavia.is/en/keflavik-airport") +
+    bannerTranslationKey;
+
+  const gettingAroundLink =
+    redirectPageStr +
+    encodeURIComponent("https://www.visiticeland.com/getting-around/") +
+    bannerTranslationKey;
+
+  const icelandHotelsLink =
+    redirectPageStr +
+    encodeURIComponent("https://www.islandshotel.is/") +
+    bannerTranslationKey;
+
+  const bookingLink =
+    redirectPageStr +
+    encodeURIComponent("https://www.booking.com/country/is.html") +
+    bannerTranslationKey;
+
+  const safeTravelLink =
+    redirectPageStr +
+    encodeURIComponent("http://www.safetravel.is/") +
+    bannerTranslationKey;
+
+  const tripSuggestionsLink =
+    redirectPageStr +
+    encodeURIComponent("https://www.visiticeland.com/trip-suggestions/") +
+    bannerTranslationKey;
+
+  const collapseGroup = (
+    <DetailElement sonificationType="model">
+      <Collapse title="Regions and Cities" id="testElement">
+        <Text>
+          Iceland is divided into several regions, each with its own unique
+          charm. Reykjavik, the capital city, is vibrant with a lively arts
+          scene and bustling nightlife. The Golden Circle encompasses some of
+          Iceland's most famous natural landmarks, including Thingvellir
+          National Park, Gullfoss waterfall, and the geothermal area of Geysir.
+          The South Coast is known for its dramatic waterfalls like
+          Seljalandsfoss and Skógafoss, black sand beaches, and the picturesque
+          village of Vik. The Westfjords offer rugged terrain, remote fishing
+          villages, and abundant wildlife, while North Iceland is home to
+          Akureyri, the country's second-largest city, and the mystical
+          landscapes around Lake Mývatn.
+        </Text>
+      </Collapse>
+      <Collapse title="Other Destinations">
+        <Text>
+          Beyond the main cities, Iceland offers a variety of lesser-known but
+          equally fascinating destinations. The Snæfellsnes Peninsula, often
+          called "Iceland in Miniature," features diverse landscapes from
+          glaciers to lava fields. The Highlands, accessible primarily in
+          summer, provide a true wilderness experience with destinations like
+          Landmannalaugar, known for its colorful rhyolite mountains and hot
+          springs. The East Fjords are less visited but boast stunning fjords,
+          charming villages, and the country's largest forest,
+          Hallormsstaðaskógur. The Westman Islands, accessible by{" "}
+          <a href={ferryLink}>ferry</a>, offer unique volcanic landscapes and
+          rich birdlife, including the famous puffin colonies.
+        </Text>
+      </Collapse>
+      <Collapse title="Understand">
+        <Text>
+          Iceland is a land of contrasts, where fire meets ice. Its volcanic
+          activity has created a landscape dotted with hot springs, geysers, and
+          lava fields, while glaciers cover a significant portion of the island.
+          The country's small population, about 370,000 people, primarily lives
+          along the coast, with vast uninhabited interiors. Icelanders are known
+          for their resilience, stemming from centuries of living in a harsh
+          environment, and their deep connection to nature. The country's
+          history is rich with Viking heritage, and its culture is infused with
+          folklore, sagas, and a strong literary tradition.
+        </Text>
+      </Collapse>
+      <Collapse title="Talk">
+        <Text>
+          The official language of Iceland is Icelandic, a North Germanic
+          language that has changed little since the Viking Age. English is
+          widely spoken, especially in tourist areas, and many Icelanders also
+          speak Danish or another Scandinavian language. Learning a few
+          Icelandic phrases can be appreciated by locals.
+        </Text>
+        <button
+          onClick={() => {
+            setModalVisible(true);
+          }}
+        >
+          Icelandic Phrasebook
+        </button>
+        <PopupModal
+          visible={modalVisible}
+          closeHandler={closeModal}
+          title="Icelandic Phrasebook"
+          content={icelandicPhrasebook}
+        />
+      </Collapse>
+      <Collapse title="Get in">
+        <Text>
+          Most visitors to Iceland arrive via{" "}
+          <a href={keflavikLink}>Keflavík International Airport</a>, located
+          about 50 kilometers southwest of Reykjavik. The airport is served by
+          numerous international airlines, with frequent flights from Europe and
+          North America. There are also seasonal ferry services connecting
+          Iceland to Denmark and the Faroe Islands. Visa requirements vary, so
+          check the regulations before traveling. The drive from the airport to
+          Reykjavik can be done by rental car, bus, or taxi, with buses being
+          the most economical option.
+        </Text>
+      </Collapse>
+      <Collapse title="Get around">
+        <Text>
+          Traveling around Iceland is relatively easy, though the weather can
+          impact road conditions. The Ring Road (Route 1) encircles the island
+          and connects most of the major towns and attractions. Rental cars are
+          popular for their flexibility, but be sure to rent a 4x4 if you plan
+          to explore the Highlands. Public transportation outside of Reykjavik
+          is limited, though there are bus services connecting larger towns.
+          Guided tours are a good option for visiting remote areas or for those
+          who prefer not to drive. Domestic flights are available for quicker
+          travel between regions.
+        </Text>
+        <Text>
+          See more information of travel on the website of the{" "}
+          <a href={gettingAroundLink}>Icelandic tourist board</a>.
+        </Text>
+      </Collapse>
+      <Collapse title="See / Do">
+        <Text>
+          Iceland offers a plethora of activities for nature lovers and
+          adventure seekers. Explore the stunning landscapes of Thingvellir
+          National Park, a UNESCO World Heritage site. Marvel at the power of
+          waterfalls like Gullfoss, Dettifoss, and Seljalandsfoss. Relax in the
+          soothing waters of the Blue Lagoon or find a less crowded hot spring.
+          During winter, chase the Northern Lights, and in summer, experience
+          the midnight sun. For thrill-seekers, options include glacier hiking,
+          ice climbing, snowmobiling, and diving between tectonic plates in
+          Silfra fissure. Don't miss whale watching tours, puffin spotting, and
+          exploring the vibrant Reykjavik cultural scene.
+        </Text>
+        <Text>
+          See more information of travel on the website of the{" "}
+          <a href={tripSuggestionsLink}>Icelandic tourist board</a>.
+        </Text>
+      </Collapse>
+      <Collapse title="Eat / Drink">
+        <Text>
+          Icelandic cuisine is a blend of traditional and modern influences,
+          with an emphasis on fresh, locally sourced ingredients. Seafood is a
+          staple, with dishes like plokkfiskur (fish stew) and fresh Atlantic
+          salmon being popular. Lamb is another common ingredient, often
+          prepared in a hearty stew or smoked to create the traditional
+          "hangikjöt." Skyr, a thick, yogurt-like dairy product, is a favorite
+          snack or dessert. Reykjavik boasts a range of dining options from fine
+          dining to casual cafes, many offering innovative takes on traditional
+          dishes. Don't miss trying a hot dog from the famous Bæjarins Beztu
+          Pylsur stand. Craft beer and Icelandic schnapps are popular drinks to
+          accompany your meal.
+        </Text>
+      </Collapse>
+      <Collapse title="Sleep">
+        <Text>
+          Accommodation in Iceland ranges from luxury hotels to budget-friendly
+          hostels and guesthouses. In Reykjavik, you'll find a wide array of
+          options, including boutique hotels and international chains. For a
+          unique experience, consider staying in a countryside guesthouse, farm
+          stay, or even a remote cabin. Camping is also popular in Iceland, with
+          numerous campgrounds available throughout the country. During the
+          summer months, book accommodations well in advance as tourism peaks.
+          Many guesthouses and smaller hotels offer cozy, family-run atmospheres
+          with breakfast included.
+        </Text>
+        <Text>Find accomodation in Iceland: </Text>
+        <ul>
+          <li>
+            <a href={icelandHotelsLink}>Iceland Hotels</a>
+          </li>
+          <li>
+            <a href={bookingLink}>Booking.com</a>
+          </li>
+        </ul>
+      </Collapse>
+      <Collapse title="Stay Safe">
+        <Text>
+          Iceland is one of the safest countries in the world, with low crime
+          rates and a strong sense of community. However, the natural
+          environment poses its own set of challenges. Weather can be
+          unpredictable, so always check forecasts and be prepared for sudden
+          changes. If driving, be aware of road conditions, especially in winter
+          when ice and snow can make travel hazardous. When exploring remote
+          areas, inform someone of your plans and carry necessary supplies.
+          Respect the natural environment, stay on marked paths, and follow
+          safety guidelines to avoid accidents. Emergency services are reliable,
+          and the national emergency number is 112.
+        </Text>
+        <ul>
+          <li>
+            <a href={safeTravelLink}>Info on general safety precautions.</a>
+          </li>
+          <li>
+            Non emergency police number: <a href="tel:444-1000">444-1000</a>
+          </li>
+          <li>
+            <a
+              href={redirectLoc}
+              onClick={() => {
+                saveMouseLog();
+              }}
+            >
+              4x4 driving precautions
+            </a>
+          </li>
+        </ul>
+      </Collapse>
+    </DetailElement>
+  );
+
+  const [detailNode, setDetailNode] = useState(collapseGroup);
+
   return (
     <StudySite>
       <WebpageBanner translationKey="task_4_info" />
@@ -52,189 +370,7 @@ function StartPage4({ redirectLoc }) {
         hot springs, and there are many tours available for those looking for a
         less and more strenuous and active vacation.
       </Text>
-      <Collapse.Group>
-        <Collapse title="Regions and Cities">
-          <Text>
-            Iceland is divided into several regions, each with its own unique
-            charm. Reykjavik, the capital city, is vibrant with a lively arts
-            scene and bustling nightlife. The Golden Circle encompasses some of
-            Iceland's most famous natural landmarks, including Thingvellir
-            National Park, Gullfoss waterfall, and the geothermal area of
-            Geysir. The South Coast is known for its dramatic waterfalls like
-            Seljalandsfoss and Skógafoss, black sand beaches, and the
-            picturesque village of Vik. The Westfjords offer rugged terrain,
-            remote fishing villages, and abundant wildlife, while North Iceland
-            is home to Akureyri, the country's second-largest city, and the
-            mystical landscapes around Lake Mývatn.
-          </Text>
-        </Collapse>
-        <Collapse title="Other Destinations">
-          <Text>
-            Beyond the main cities, Iceland offers a variety of lesser-known but
-            equally fascinating destinations. The Snæfellsnes Peninsula, often
-            called "Iceland in Miniature," features diverse landscapes from
-            glaciers to lava fields. The Highlands, accessible primarily in
-            summer, provide a true wilderness experience with destinations like
-            Landmannalaugar, known for its colorful rhyolite mountains and hot
-            springs. The East Fjords are less visited but boast stunning fjords,
-            charming villages, and the country's largest forest,
-            Hallormsstaðaskógur. The Westman Islands, accessible by {" "}
-            <a href="https://visitwestmanislands.com/tour/ferry-landeyjahofn-to-vestmannaeyjar/">
-              ferry
-            </a>
-            , offer unique volcanic landscapes and rich birdlife, including the
-            famous puffin colonies.
-          </Text>
-        </Collapse>
-        <Collapse title="Understand">
-          <Text>
-            Iceland is a land of contrasts, where fire meets ice. Its volcanic
-            activity has created a landscape dotted with hot springs, geysers,
-            and lava fields, while glaciers cover a significant portion of the
-            island. The country's small population, about 370,000 people,
-            primarily lives along the coast, with vast uninhabited interiors.
-            Icelanders are known for their resilience, stemming from centuries
-            of living in a harsh environment, and their deep connection to
-            nature. The country's history is rich with Viking heritage, and its
-            culture is infused with folklore, sagas, and a strong literary
-            tradition.
-          </Text>
-        </Collapse>
-        <Collapse title="Talk">
-          <Text>
-            The official language of Iceland is Icelandic, a North Germanic
-            language that has changed little since the Viking Age. English is
-            widely spoken, especially in tourist areas, and many Icelanders also
-            speak Danish or another Scandinavian language. Learning a few
-            Icelandic phrases can be appreciated by locals.
-          </Text>
-          <button onClick={() => {setModalVisible(true)}}>Icelandic Phrasebook</button>
-          <PopupModal
-            visible={modalVisible}
-            closeHandler={closeModal}
-            title="Icelandic Phrasebook"
-            content={icelandicPhrasebook}
-          />
-        </Collapse>
-        <Collapse title="Get in">
-          <Text>
-            Most visitors to Iceland arrive via {" "}
-            <a href="https://www.isavia.is/en/keflavik-airport">
-              Keflavík International Airport
-            </a>
-            , located about 50 kilometers southwest of Reykjavik. The airport is
-            served by numerous international airlines, with frequent flights
-            from Europe and North America. There are also seasonal ferry
-            services connecting Iceland to Denmark and the Faroe Islands. Visa
-            requirements vary, so check the regulations before traveling. The
-            drive from the airport to Reykjavik can be done by rental car, bus,
-            or taxi, with buses being the most economical option.
-          </Text>
-        </Collapse>
-        <Collapse title="Get around">
-          <Text>
-            Traveling around Iceland is relatively easy, though the weather can
-            impact road conditions. The Ring Road (Route 1) encircles the island
-            and connects most of the major towns and attractions. Rental cars
-            are popular for their flexibility, but be sure to rent a 4x4 if you
-            plan to explore the Highlands. Public transportation outside of
-            Reykjavik is limited, though there are bus services connecting
-            larger towns. Guided tours are a good option for visiting remote
-            areas or for those who prefer not to drive. Domestic flights are
-            available for quicker travel between regions.
-          </Text>
-          <Text>
-            See more information of travel on the website of the {" "}
-            <a href="https://www.visiticeland.com/getting-around/">
-              Icelandic tourist board
-            </a>.
-          </Text>
-        </Collapse>
-        <Collapse title="See / Do">
-          <Text>
-            Iceland offers a plethora of activities for nature lovers and
-            adventure seekers. Explore the stunning landscapes of Thingvellir
-            National Park, a UNESCO World Heritage site. Marvel at the power of
-            waterfalls like Gullfoss, Dettifoss, and Seljalandsfoss. Relax in
-            the soothing waters of the Blue Lagoon or find a less crowded hot
-            spring. During winter, chase the Northern Lights, and in summer,
-            experience the midnight sun. For thrill-seekers, options include
-            glacier hiking, ice climbing, snowmobiling, and diving between
-            tectonic plates in Silfra fissure. Don't miss whale watching tours,
-            puffin spotting, and exploring the vibrant Reykjavik cultural scene.
-          </Text>
-          <Text>
-            See more information of travel on the website of the {" "}
-            <a href="https://www.visiticeland.com/trip-suggestions/">
-              Icelandic tourist board
-            </a>.
-          </Text>
-        </Collapse>
-        <Collapse title="Eat / Drink">
-          <Text>
-            Icelandic cuisine is a blend of traditional and modern influences,
-            with an emphasis on fresh, locally sourced ingredients. Seafood is a
-            staple, with dishes like plokkfiskur (fish stew) and fresh Atlantic
-            salmon being popular. Lamb is another common ingredient, often
-            prepared in a hearty stew or smoked to create the traditional
-            "hangikjöt." Skyr, a thick, yogurt-like dairy product, is a favorite
-            snack or dessert. Reykjavik boasts a range of dining options from
-            fine dining to casual cafes, many offering innovative takes on
-            traditional dishes. Don't miss trying a hot dog from the famous
-            Bæjarins Beztu Pylsur stand. Craft beer and Icelandic schnapps are
-            popular drinks to accompany your meal.
-          </Text>
-        </Collapse>
-        <Collapse title="Sleep">
-          <Text>
-            Accommodation in Iceland ranges from luxury hotels to
-            budget-friendly hostels and guesthouses. In Reykjavik, you'll find a
-            wide array of options, including boutique hotels and international
-            chains. For a unique experience, consider staying in a countryside
-            guesthouse, farm stay, or even a remote cabin. Camping is also
-            popular in Iceland, with numerous campgrounds available throughout
-            the country. During the summer months, book accommodations well in
-            advance as tourism peaks. Many guesthouses and smaller hotels offer
-            cozy, family-run atmospheres with breakfast included.
-          </Text>
-          <Text>Find accomodation in Iceland: </Text>
-          <ul>
-            <li>
-              <a href="https://www.islandshotel.is/">Iceland Hotels</a>
-            </li>
-            <li>
-              <a href="https://www.booking.com/country/is.html">Booking.com</a>
-            </li>
-          </ul>
-        </Collapse>
-        <Collapse title="Stay Safe">
-          <Text>
-            Iceland is one of the safest countries in the world, with low crime
-            rates and a strong sense of community. However, the natural
-            environment poses its own set of challenges. Weather can be
-            unpredictable, so always check forecasts and be prepared for sudden
-            changes. If driving, be aware of road conditions, especially in
-            winter when ice and snow can make travel hazardous. When exploring
-            remote areas, inform someone of your plans and carry necessary
-            supplies. Respect the natural environment, stay on marked paths, and
-            follow safety guidelines to avoid accidents. Emergency services are
-            reliable, and the national emergency number is 112.
-          </Text>
-          <ul>
-            <li>
-              <a href="http://www.safetravel.is/">
-                Info on general safety precautions.
-              </a>
-            </li>
-            <li>
-              Non emergency police number: <a href="tel:444-1000">444-1000</a>
-            </li>
-            <li>
-              <a href={redirectLoc} onClick={() => {saveMouseLog()}}>4x4 driving precautions</a>
-            </li>
-          </ul>
-        </Collapse>
-      </Collapse.Group>
+      {collapseGroup}
     </StudySite>
   );
 }