|
|
|
@ -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,37 +124,61 @@ function StartPage4({ redirectLoc }) { |
|
|
|
// IS THAT OKAY??? |
|
|
|
// TODO ALSO THINK WHAT TO DO WITH OUT LINKS??? |
|
|
|
|
|
|
|
return ( |
|
|
|
<StudySite> |
|
|
|
<WebpageBanner translationKey="task_4_info" /> |
|
|
|
<Spacer h={1} /> |
|
|
|
<img |
|
|
|
src="/images/traveltrekker_logo.png" |
|
|
|
width="150px" |
|
|
|
alt="TravelTrekker Logo" |
|
|
|
class="centeredLogo" |
|
|
|
/> |
|
|
|
<Text> |
|
|
|
Iceland (Icelandic: <i>Ísland</i>) is a beautiful place with desolate |
|
|
|
landscapes interspersed with glaciers, volcanoes, rivers and waterfalls. |
|
|
|
It is a place for hiking, enjoying nature, and relaxing in geothermal |
|
|
|
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"> |
|
|
|
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. |
|
|
|
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"> |
|
|
|
@ -79,25 +192,21 @@ function StartPage4({ redirectLoc }) { |
|
|
|
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. |
|
|
|
<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. |
|
|
|
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"> |
|
|
|
@ -108,7 +217,13 @@ function StartPage4({ redirectLoc }) { |
|
|
|
speak Danish or another Scandinavian language. Learning a few |
|
|
|
Icelandic phrases can be appreciated by locals. |
|
|
|
</Text> |
|
|
|
<button onClick={() => {setModalVisible(true)}}>Icelandic Phrasebook</button> |
|
|
|
<button |
|
|
|
onClick={() => { |
|
|
|
setModalVisible(true); |
|
|
|
}} |
|
|
|
> |
|
|
|
Icelandic Phrasebook |
|
|
|
</button> |
|
|
|
<PopupModal |
|
|
|
visible={modalVisible} |
|
|
|
closeHandler={closeModal} |
|
|
|
@ -119,35 +234,31 @@ function StartPage4({ redirectLoc }) { |
|
|
|
<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. |
|
|
|
<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. |
|
|
|
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>. |
|
|
|
<a href={gettingAroundLink}>Icelandic tourist board</a>. |
|
|
|
</Text> |
|
|
|
</Collapse> |
|
|
|
<Collapse title="See / Do"> |
|
|
|
@ -155,19 +266,17 @@ function StartPage4({ redirectLoc }) { |
|
|
|
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. |
|
|
|
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>. |
|
|
|
<a href={tripSuggestionsLink}>Icelandic tourist board</a>. |
|
|
|
</Text> |
|
|
|
</Collapse> |
|
|
|
<Collapse title="Eat / Drink"> |
|
|
|
@ -178,32 +287,32 @@ function StartPage4({ redirectLoc }) { |
|
|
|
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. |
|
|
|
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. |
|
|
|
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> |
|
|
|
<a href={icelandHotelsLink}>Iceland Hotels</a> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<a href="https://www.booking.com/country/is.html">Booking.com</a> |
|
|
|
<a href={bookingLink}>Booking.com</a> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</Collapse> |
|
|
|
@ -213,28 +322,55 @@ function StartPage4({ redirectLoc }) { |
|
|
|
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. |
|
|
|
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> |
|
|
|
<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> |
|
|
|
<a |
|
|
|
href={redirectLoc} |
|
|
|
onClick={() => { |
|
|
|
saveMouseLog(); |
|
|
|
}} |
|
|
|
> |
|
|
|
4x4 driving precautions |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</Collapse> |
|
|
|
</Collapse.Group> |
|
|
|
</DetailElement> |
|
|
|
); |
|
|
|
|
|
|
|
const [detailNode, setDetailNode] = useState(collapseGroup); |
|
|
|
|
|
|
|
return ( |
|
|
|
<StudySite> |
|
|
|
<WebpageBanner translationKey="task_4_info" /> |
|
|
|
<Spacer h={1} /> |
|
|
|
<img |
|
|
|
src="/images/traveltrekker_logo.png" |
|
|
|
width="150px" |
|
|
|
alt="TravelTrekker Logo" |
|
|
|
class="centeredLogo" |
|
|
|
/> |
|
|
|
<Text> |
|
|
|
Iceland (Icelandic: <i>Ísland</i>) is a beautiful place with desolate |
|
|
|
landscapes interspersed with glaciers, volcanoes, rivers and waterfalls. |
|
|
|
It is a place for hiking, enjoying nature, and relaxing in geothermal |
|
|
|
hot springs, and there are many tours available for those looking for a |
|
|
|
less and more strenuous and active vacation. |
|
|
|
</Text> |
|
|
|
{collapseGroup} |
|
|
|
</StudySite> |
|
|
|
); |
|
|
|
} |
|
|
|
|
