diff --git a/game.html b/game.html index effbf01..159b4a0 100644 --- a/game.html +++ b/game.html @@ -5,6 +5,14 @@ + + EffortTapper @@ -28,18 +36,188 @@ appId: "1:1000034285154:web:a6f1e84c5f4f2a236b033b", }; - window.app = initializeApp(firebaseConfig); - - window.db = getDatabase(window.app); + const app = initializeApp(firebaseConfig); + window.db = getDatabase(app); window.dbFunctions = { ref, set, } + + window.onload = () => { + const questions = [ + { + label: "01. reserved", + question: "I see myself as someone who is reserved", + }, + { + label: '02. trusting', + question: 'I see myself as someone who is generally trusting' + }, + { + label: '03. lazy', + question: 'I see myself as someone who tends to be lazy ' + }, + { + label: '04. relaxed', + question: 'I see myself as someone who is relaxed, handles stress well' + }, + { + label: '05. artistic', + question: 'I see myself as someone who has few artistic interests' + }, + { + label: '06. outgoing', + question: 'I see myself as someone who is outgoing, sociable' + }, + { + label: '07. others_fault', + question: 'I see myself as someone who tends to find fault with others' + }, + { + label: '08. thorough_job', + question: 'I see myself as someone who does a thorough job' + }, + { + label: '09. nervous', + question: 'I see myself as someone who gets nervous easily' + }, + { + label: '10. imagination', + question: 'I see myself as someone who has an active imagination' + }, + ]; + const questionsLayout = questions + .map( + ({ label, question }, index) => `
+
+

${question}

+
+ + +
+

+ + +

+

+ + +

+ +

+ + +

+ +

+ + +

+
+
+
+
+
+
` + ) + .join(""); + + document + .querySelector(".row.last") + .insertAdjacentHTML("beforebegin", questionsLayout); + + const form = document.getElementById("myForm"); + const submitButton = document.getElementById("submit"); + + const toggleButtonDisabled = () => { + const formData = new FormData(form); + const values = Object.fromEntries(formData); + if (Object.keys(values).length === questions.length) + submitButton.disabled = false; + }; + form.addEventListener("input", toggleButtonDisabled); + + const handleSubmit = (e) => { + e.preventDefault(); + submitButton.style.display = "none"; + const wait = document.createElement("div"); + wait.innerHTML = "Wait..."; + form.appendChild(wait); + const formData = new FormData(form); + const values = {}; + formData.forEach(function (value, key) { + values[key] = value; + }); + const urlParams = new URLSearchParams(window.location.search); + const id = urlParams.get("UUID"); + if (id) { + set(ref(db, `${id}/questionnaire`), JSON.stringify(values)) + .then(() => { + wait.innerHTML = "Thank you!"; + }) + .catch(() => { + wait.remove(); + submitButton.style.display = "block"; + }); + } + }; + form.addEventListener("submit", handleSubmit); + }; +
+
+

Thank you for participation

+
+
+ +
+
+
+

Economic survey experiment

+

+ Please fill the next form. All questions are anonymous and the + results will be used only for scientific purposes. +

+
+
+ +
+
+

+ Here are a number of characteristics that may or may not apply to + you. Please choose a number next to each statement to indicate the + extent to which you agree or disagree with that statement. +

+ I see myself as someone who … +
+
+ +
+
+ +
+
+
+
+ - \ No newline at end of file + diff --git a/game.js b/game.js index 727ff24..fa1de7b 100644 --- a/game.js +++ b/game.js @@ -18,6 +18,8 @@ const minSceneMaxHeight = minSceneHeight - maxSceneHeght; // 440 const dx = 2; +let interval = 0 + const throttle = (callback, delay) => { let shouldWait = false; return (...args) => { @@ -380,13 +382,19 @@ const UI = { if (state.startGameTime && state.startGameTime + 60000 < Date.now()) { state.currentGameStep = state.finalScreenGameStep + clearInterval(interval) + + const searchParams = new URLSearchParams(window.location.search); + const id = searchParams.get("UUID"); + if (id) { + dbFunctions.set(dbFunctions.ref(db, id), { + result: JSON.stringify(state), + }) + } + setTimeout(() => { - const searchParams = new URLSearchParams(window.location.search); - for (key in state) { - searchParams.append(key, state[key]); - } - window.location.href = `./final.html?${searchParams.toString()}`; - }, 1500) + document.getElementsByClassName('final')[0].style.display = 'block' + }, 500) } if (state.currentGameStep === state.playGameStep) return; @@ -423,7 +431,7 @@ const runGame = () => { UI.tap[0].sprite.src = "img/tap1.png"; UI.tap[1].sprite.src = "img/tap2.png"; - setInterval(gameLoop, 20); + interval = setInterval(gameLoop, 20); }; runGame(); diff --git a/style.css b/style.css index 808d39b..a0af22a 100644 --- a/style.css +++ b/style.css @@ -36,6 +36,7 @@ hr { .final { width: 1000px; + display: none; } /* global */ @@ -104,4 +105,4 @@ input { .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; -} \ No newline at end of file +}