Browse Source

feat: Added sonification "hooks".

master
Denis Thiessen 5 months ago
parent
commit
ce0bf34c68
  1. 98
      src/components/DetailElement.jsx
  2. 15
      src/components/ScrollableTab.jsx
  3. 21
      src/core/audio/AudioHandler.jsx
  4. 5
      src/pages/study_site_1/StartPage1.jsx
  5. 21
      src/pages/study_site_2/StartPage2.jsx
  6. 5
      src/pages/study_site_3/StartPage3.jsx
  7. 520
      src/pages/study_site_4/StartPage4.jsx

98
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;

15
src/components/ScrollableTab.jsx

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

21
src/core/audio/AudioHandler.jsx

@ -19,6 +19,13 @@ const setRotationRamp = (panner, angle, rampTime) => {
}; };
export function playTabEarconSonification() { 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"); pushToSonificationLog("tab_earcon");
} }
@ -34,9 +41,23 @@ export function playTabModelSonification() {
} }
export function playDetailEarconSonification() { 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"); pushToSonificationLog("detail_earcon");
} }
export function playDetailModelSonification() { 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"); pushToSonificationLog("detail_model");
} }

5
src/pages/study_site_1/StartPage1.jsx

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

21
src/pages/study_site_2/StartPage2.jsx

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

5
src/pages/study_site_3/StartPage3.jsx

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

520
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 WebpageBanner from "../../components/webpage_container/WebpageBanner";
import { import {
StudySite, StudySite,
getHeatmapData, getHeatmapData,
} from "../../components/webpage_container/StudySite"; } 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 { Collapse, Text, Spacer } from "@geist-ui/core";
import PopupModal from "../../components/PopupModal"; import PopupModal from "../../components/PopupModal";
import {
playDetailModelSonification,
playTabModelSonification,
} from "../../core/audio/AudioHandler";
import DetailElement from "../../components/DetailElement";
function StartPage4({ redirectLoc }) { function StartPage4({ redirectLoc }) {
const [modalVisible, setModalVisible] = useState(false); 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 () { var saveMouseLog = function () {
pushToMouseLog(getHeatmapData()); pushToMouseLog(getHeatmapData());
//window.location.href = "./" + redirectLoc;
}; };
const closeModal = () => { const closeModal = () => {
@ -23,11 +102,21 @@ function StartPage4({ redirectLoc }) {
const icelandicPhrasebook = ( const icelandicPhrasebook = (
<ul> <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> </ul>
); );
@ -35,6 +124,235 @@ function StartPage4({ redirectLoc }) {
// IS THAT OKAY??? // IS THAT OKAY???
// TODO ALSO THINK WHAT TO DO WITH OUT LINKS??? // 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 ( return (
<StudySite> <StudySite>
<WebpageBanner translationKey="task_4_info" /> <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 hot springs, and there are many tours available for those looking for a
less and more strenuous and active vacation. less and more strenuous and active vacation.
</Text> </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> </StudySite>
); );
} }

Loading…
Cancel
Save