|
@ -1,5 +1,4 @@ |
|
|
import React, { useEffect, useRef, useState } from "react"; |
|
|
|
|
|
import ReactDOM from "react-dom"; |
|
|
|
|
|
|
|
|
import React, { useState } from "react"; |
|
|
import WebpageBanner from "../../components/webpage_container/WebpageBanner"; |
|
|
import WebpageBanner from "../../components/webpage_container/WebpageBanner"; |
|
|
import { |
|
|
import { |
|
|
StudySite, |
|
|
StudySite, |
|
@ -8,89 +7,10 @@ import { |
|
|
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 PopupModal from "../../components/PopupModal"; |
|
|
import PopupModal from "../../components/PopupModal"; |
|
|
import { |
|
|
|
|
|
playDetailModelSonification, |
|
|
|
|
|
playTabModelSonification, |
|
|
|
|
|
} from "../../core/audio/AudioHandler"; |
|
|
|
|
|
import DetailElement from "../../components/DetailElement"; |
|
|
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()); |
|
@ -351,8 +271,6 @@ function StartPage4({ redirectLoc }) { |
|
|
</DetailElement> |
|
|
</DetailElement> |
|
|
); |
|
|
); |
|
|
|
|
|
|
|
|
const [detailNode, setDetailNode] = useState(collapseGroup); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<StudySite> |
|
|
<StudySite> |
|
|
<WebpageBanner translationKey="task_4_info" /> |
|
|
<WebpageBanner translationKey="task_4_info" /> |
|
|