Commit 74133062 authored by au593919's avatar au593919
Browse files

initial commit

parents
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
var resetBox
var moleBox
var repetitions = 1 //number of repetitions
var results = [] //array including widths, distances and mts per trial
var standByTime = Math.random() * 2 + 0.7
var inCalibrationPhase = true
var moleBoxHasBeenClicked = false
var roundCounter = 0
var points = 0
var indexToGetCalibrationWidth = 0
var indexToGetCalibrationDistance = 0
var timerStart
var timerEnd
var mt = 0 //movement time
var width
var distance
var widths = [10, 30, 50]
var distances = [-200, 100, 500]
var startedAtresetBox = true //trial starts at left box
var completedCombinations = [] //array including all combinations completed
var counter = -1
var numberOfConditions = 3 //number of total conditions
function displayMoleBox(state) {
if (!state) {
moleBox.style.visibility = "hidden"
} else {
moleBox.style.visibility = "visible"
}
}
//your trials should be saved here.
function saveTrial(mt) {
let result = {
mt: mt
}
results.push(result)
}
function quitExperiment() {
moleBox.remove()
resetBox.remove()
}
//check if condition is already completed. If so, true is returned, i.e. combination will not be tested again.
function checkIfConditionAlreadyCompleted(currentCombination) {
for (var i = 0, len = completedCombinations.length; i < len; i++) {
if (completedCombinations[i][0] == currentCombination[0] && completedCombinations[i][1] == currentCombination[1]) {
return true
}
}
return false
}
/*get random indices from array to obtain random width and distance. If combination of width and distance already tested,
new indices are generated.
*/
function getIndices() {
let indexToGetWidth = 0
let indexToGetDistance = 0
let indices = []
indexToGetWidth = Math.floor((Math.random() * widths.length))
indexToGetDistance = Math.floor((Math.random() * distances.length))
completedCombinations.push([indexToGetWidth, indexToGetDistance])
indices.push(indexToGetWidth, indexToGetDistance)
return indices
}
//get indices for calibration phase
function getFixedIndices() {
let indices = []
indices.push(indexToGetCalibrationWidth, indexToGetCalibrationDistance)
completedCombinations.push([indexToGetCalibrationWidth, indexToGetCalibrationDistance])
indexToGetCalibrationWidth += 1
indexToGetCalibrationDistance += 1
return indices
}
//get width and distance and save in parameters array
function getParameters() {
let indices
if (inCalibrationPhase) {
indices = getFixedIndices()
} else if (!inCalibrationPhase) {
indices = getIndices()
}
let parameters = {
width: widths[indices[0]],
distance: distances[indices[1]]
}
return parameters
}
//sets the position of the target
function setTargetPosition(start, newTarget) {
newTarget.style.padding = width
newTarget.style.left = distance
start.style.width = width
}
//initializes target and starts timer
function initTarget(start, newTarget) {
start.classList.remove("borderStyle")
newTarget.classList.add("borderStyle")
timerStart = Date.now()
}
//initializes new condition
function initCondition(start, newTarget) {
let parameters = getParameters()
width = parameters["width"]
distance = parameters["distance"]
setTargetPosition(start, newTarget)
start.classList.add("borderStyle")
moleBox.classList.remove("borderStyle")
}
//time per trial is calculated.
function calculateTrial() {
timerEnd = Date.now()
let mt = timerEnd - timerStart
if (inCalibrationPhase) {
saveTrial(mt)
}
}
function onResetBoxClicked(event) {
if (!inCalibrationPhase) {
roundCounter += 1
document.getElementById("roundDisplay").innerHTML = "Round #" + roundCounter
console.log("round number " + roundCounter)
}
startButton.disabled = true
setTimeout("displayMoleBox(true)", standByTime * 1000)
resetBox.classList.add("disabledBox")
moleBox.classList.remove("disabledBox")
initTarget(resetBox, moleBox)
if (moleBoxHasBeenClicked) {
initCondition(resetBox, moleBox)
initTarget(resetBox, moleBox)
moleBoxHasBeenClicked = false
}
}
function onMoleBoxClicked(event) {
if (!inCalibrationPhase) {
points += 1
document.getElementById("pointsDisplay").innerHTML = "score: " + points
console.log("score: " + points)
}
calculateTrial()
moleBoxHasBeenClicked = true
resetBox.classList.remove("disabledBox")
moleBox.classList.add("disabledBox")
initTarget(moleBox, resetBox)
displayMoleBox(false)
if (inCalibrationPhase && completedCombinations.length >= numberOfConditions) {
startButton.innerHTML = "Start Game!"
inCalibrationPhase = false
startButton.disabled = false
resetBox.style.visibility = "hidden"
}
if (!inCalibrationPhase && roundCounter == 60) {
quitExperiment()
}
}
function onStartButtonClicked() {
resetBox.style.visibility = "visible"
initCondition(resetBox, moleBox)
startButton.disabled = true
startButton.innerHTML = "Next calibration round"
resetBox.classList.remove("disabledBox")
moleBox.classList.add("disabledBox")
}
//initialize reference to dom-elements and start click-listeners
function init() {
resetBox = document.querySelector(".start-box")
moleBox = document.querySelector(".mole-box")
moleBox.addEventListener("click", onMoleBoxClicked)
resetBox.addEventListener("click", onResetBoxClicked)
startButton = document.querySelector("#start-button")
startButton.addEventListener("click", onStartButtonClicked)
}
init()
\ No newline at end of file
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3 id="roundDisplay"></h3>
<h3 id="pointsDisplay"></h3>
<button id="start-button">Start calibration</button>
<div class="container">
<button class="start-box"></button>
<button class="mole-box"></button>
</div>
<div class="test"> </div>
<script type="text/javascript" src="code.js"></script>
</body>
</html>
\ No newline at end of file
body {
position: relative;
width: 50%;
margin: 0 auto;
font-family: "Tahoma", "Geneva", sans-serif;
text-align: center;
}
h1 {
font-family: "Georgia", serif;
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
}
h3{
font-family: "Georgia", serif;
text-align: center;
margin-top: 2em;
margin-bottom: 2em;
}
p {
line-height: 1.5em;
padding: 1em;
border: solid #333;
border-width: 0 1px 0 1px;
}
.disabledBox {
pointer-events: none;
}
.container {
background-color: gray;
width: 1024px;
height: 768px;
position: absolute;
}
.mole-box{
visibility: hidden;
display: inline-block;
background-color: red;
padding: 10px;
border-radius: 50%;
position: relative;
border-style: solid;
top: 384px;
}
.borderStyle{
border-width: medium;
border-style: solid;
border-color: blue;
}
.start-box{
visibility: hidden;
background-color: green;
padding: 30px;
border-radius: 50%;
position: absolute;
top: 384px;
left: 512px;
border-style: solid;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment