diff --git a/src/components/DetailElement.jsx b/src/components/DetailElement.jsx new file mode 100644 index 0000000..3bbb41f --- /dev/null +++ b/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 ( +
{}} + onTouchStart={touchEvent} + onTouchMove={touchEvent} + > + {children} +
+ ); +} + +export default DetailElement; diff --git a/src/components/ScrollableTab.jsx b/src/components/ScrollableTab.jsx index d6456b6..0afe691 100644 --- a/src/components/ScrollableTab.jsx +++ b/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(); diff --git a/src/core/audio/AudioHandler.jsx b/src/core/audio/AudioHandler.jsx index 9dfa83e..0ea8edf 100644 --- a/src/core/audio/AudioHandler.jsx +++ b/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"); } diff --git a/src/pages/study_site_1/StartPage1.jsx b/src/pages/study_site_1/StartPage1.jsx index bd29653..8d2855c 100644 --- a/src/pages/study_site_1/StartPage1.jsx +++ b/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 }) {

Frequently Asked Questions

- + 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. - + ); } diff --git a/src/pages/study_site_2/StartPage2.jsx b/src/pages/study_site_2/StartPage2.jsx index c349225..54860f0 100644 --- a/src/pages/study_site_2/StartPage2.jsx +++ b/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 = [ - (), - (), - (), - (), - (), - (), + , + , + , + , + , + , "", "", - (), - (), + , + , ]; function StartPage2() { @@ -65,7 +65,10 @@ function StartPage2() {

Hotel Le Laboratoire

{tabContent[activeTabIndex]} - + diff --git a/src/pages/study_site_3/StartPage3.jsx b/src/pages/study_site_3/StartPage3.jsx index ff319bb..29dc289 100644 --- a/src/pages/study_site_3/StartPage3.jsx +++ b/src/pages/study_site_3/StartPage3.jsx @@ -67,7 +67,10 @@ function StartPage3({ redirectLoc }) {

Software Engineering

{tabContent[activeTabIndex]} - + diff --git a/src/pages/study_site_4/StartPage4.jsx b/src/pages/study_site_4/StartPage4.jsx index d635a9c..63fe71c 100644 --- a/src/pages/study_site_4/StartPage4.jsx +++ b/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 = (
    -
  • Góðan daginn. → Good day.
    • -
  • Takk (fyrir). → Thank you.
    • -
  • Halló. → Hello.
    • -
  • Hjálp! → Help!
    • -
  • Ekkert mál. → You're welcome.
    • +
  • + Góðan daginn. → Good day. +
    • +
  • + Takk (fyrir). → Thank you. +
    • +
  • + Halló. → Hello. +
    • +
  • + Hjálp! → Help! +
    • +
  • + Ekkert mál. → You're welcome. +
); @@ -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 = ( + + + + 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. + + + + + 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{" "} + ferry, offer unique volcanic landscapes and + rich birdlife, including the famous puffin colonies. + + + + + 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. + + + + + 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. + + + + + + + Most visitors to Iceland arrive via{" "} + Keflavík International Airport, 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. + + + + + 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. + + + See more information of travel on the website of the{" "} + Icelandic tourist board. + + + + + 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. + + + See more information of travel on the website of the{" "} + Icelandic tourist board. + + + + + 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. + + + + + 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. + + Find accomodation in Iceland: + + + + + 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. + + + + + ); + + const [detailNode, setDetailNode] = useState(collapseGroup); + return ( @@ -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. - - - - 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. - - - - - 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 {" "} - - ferry - - , offer unique volcanic landscapes and rich birdlife, including the - famous puffin colonies. - - - - - 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. - - - - - 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. - - - - - - - Most visitors to Iceland arrive via {" "} - - Keflavík International Airport - - , 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. - - - - - 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. - - - See more information of travel on the website of the {" "} - - Icelandic tourist board - . - - - - - 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. - - - See more information of travel on the website of the {" "} - - Icelandic tourist board - . - - - - - 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. - - - - - 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. - - Find accomodation in Iceland: - - - - - 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. - - - - + {collapseGroup} ); }