Differences

This shows you the differences between two versions of the page.

--- students:value-calculator-quiz [2024/01/26 02:33] – steve.wang
+++ students:value-calculator-quiz [2024/01/27 01:42] (current) – steve.wang
@@ Line 1: / Line 1: @@
+====== Value calculator ======
 <html>
-<script>
+  <meta charset="UTF-8">
-    //helped by chatgpt
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    //maybe partially bardAI
+<!-- Code made using Github Copilot and Google Bard -->
-function removeCrap (){
+<style>
-document.getElementsByTagName('head')[0].remove()
+/* cODE MAde using Github Copilot Google Bard  */
-document.getElementsByTagName('body')[0].remove()
+/* Changed background color from black to grey, change font color to light grey, change font from default to this.*/
+html, body {
+ color: white;
+  width: 94%;
+  height: 90%;
+/*  overflow: auto;*/
+  background-color: #262626;
+  color: white;
+ margin-left: 2%;
+  transition: opacity 0.2s;
+  font-family: Arial, Helvetica, sans-serif;
 }
-let pitchStuff = document.createElement('div')
-pitchStuff.id = 'pichStuff'
-// Create a container div
-var sliderContainer = document.createElement('div');
-sliderContainer.classList.add('slider-container');
-// Create min label
+#nextQButton {
-var minLabel = document.createElement('div');
+  background-color: green;
-minLabel.setAttribute('id', 'min');
+  color: white;
-minLabel.textContent = '50';
+}
-minLabel.style.color = 'white'
-// Create max label
+#tBox{
-var maxLabel = document.createElement('div');
+    width: 99.5%;
-maxLabel.setAttribute('id', 'max');
+    height: 30%;
-maxLabel.textContent = '16000';
+    font-size: 600%;
-maxLabel.style.color = 'white'
+  color: white;
+  background-color: #262626;
+    border-style:solid;
+    border-width: 1px;
+    border-color: silver;
+}
-// Create a button with id 'back'
-var backButton = document.createElement('button');
-backButton.id = 'back';
-backButton.textContent = 'Back';
-backButton.style.fontSize = '100%'
-pitchStuff.appendChild(backButton);
-// Style the 'back' button
+#question {
-backButton.style.display = 'block'; // Change display property to block
+    position: relative;
+    text-wrap: wrap;
+    width: 99%;
+    font-size: 400%;
+}
-// Create a button with id 'average'
+#timer{
-var averageButton = document.createElement('button');
+    background-color: #262626;
-averageButton.id = 'average';
+    text-align: center;
-averageButton.textContent = 'Average';
+    width: 18%;
-averageButton.style.fontSize = '100%'
+    padding:2px;
-pitchStuff.appendChild(averageButton);
+    color: white;
+    font-size:300%;
+    border-style:solid;
+    border-width: 1px;
+    border-color: silver;
+   -moz-user-select: -moz-none;
+   -khtml-user-select: none;
+   -webkit-user-select: none;
+   /*
+     Introduced in IE 10.
+     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
+   */
+   -ms-user-select: none;
+   user-select: none;
+}
+/* Make text unselectable: https://stackoverflow.com/a/4448972/19515980 */
-// Style the 'average' button
+#instructions{
-averageButton.style.display = 'block'; // Change display property to block
+    text-wrap: wrap;
+    left: min(100px, 3%);
+    max-width: 94%;
+    font-size: 200%;
+}
-// Create a button with id 'hi'
+/* Text wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap */
-var hiButton = document.createElement('button');
-hiButton.id = 'hi';
-hiButton.textContent = 'Press to start Pitch Machine';
-hiButton.style.fontSize = '200%'
-pitchStuff.appendChild(hiButton);
-// Style the 'hi' button
+.grid-container {
-hiButton.style.display = 'inline-block';
+  display: grid;
+  grid-template-columns: auto auto auto;
+  background-color: #262626;
+  vertical-align: center;
+}
-// Create a button with id 'enterM'
+.grid-item {
-var enterMButton = document.createElement('button');
+  left: 0%;
-enterMButton.id = 'enterM';
+  background-color: #262626;
-pitchStuff.appendChild(enterMButton);
+  border: 1px solid grey;
+  font-size: 200%;
+  padding: 3%;
+  text-align: center;
+  -webkit-user-select: none; /* Safari */
+-moz-user-select: none; /* Firefox */
+-ms-user-select: none; /* IE10+/Edge */
+user-select: none; /* Standard */
+  transition: font-size 0.1s, background-color 0.2s, color 0.2s;
+          vertical-align: center;
+}
+/* CSS animations: https://www.w3schools.com/css/css3_transitions.asp */
+/* https://stackoverflow.com/a/6900392/19515980 */
-// Style the 'enterM' button
+.grid-item:hover{
-enterMButton.style.display = 'block'; // Change display property to block
+    cursor: pointer;
+}
-// Create a button with id 'enterF'
+#compareResults{
-var enterFButton = document.createElement('button');
+    color: red;
-enterFButton.id = 'enterF';
+    background-color: black;
-pitchStuff.appendChild(enterFButton);
+    border-color: #e9e9e9;
+    width: 10%;
+    height: 20%;
+    position: absolute;
+    top: -100%;
+    left: 25%;
+    font-size: 550%;
+    display: none;
+    transition: width 0.5s, top 1s;
+    overflow-wrap: break-word;
+    overflow: scroll;
+}
-// Style the 'enterF' button
+@media (orientation: portrait) {
-enterFButton.style.display = 'block'; // Change display property to block
+    .grid-item{
+        font-size: 300%;
+        padding: 2%;
+    }
+    #timer{
+        width: auto;
+        font-size: 300%;
+    }
+    .grid-container {
+        width: 100%
+    }
+    #tBox{
+        font-size: 350%;
+        width: 85%;
+    }
+    #deleteText{
+        font-size: 200%;
+      text-align: center;
+        justify-content: center;
+          align-items: center;
+          vertical-align: center;
+    }
+    #nextQButton{
+        font-size: 200%;
+      text-align: center;
+        align-items: center;
+        justify-content: center;
+    }
+    #question{
+        font-size: 230%;
+    }
+    #instructions{
+        font-size: 130%
+    }
+    #notification{
+        font-size: 110%;
+    }
+    #compareResults{
+        font-size: 300%;
+        width: 100%;
+        left: 0px
+    }
+}
-// Create range input
-var rangeInput = document.createElement('input');
-rangeInput.setAttribute('type', 'range');
-rangeInput.setAttribute('min', '50');
-rangeInput.setAttribute('max', '16000');
-rangeInput.setAttribute('value', '1000');
-rangeInput.classList.add('slider');
-rangeInput.setAttribute('id', 'mySlider');
-// Create slider value display
+#compareResults:hover{
-var sliderValue = document.createElement('div');
+    cursor: pointer;
-sliderValue.setAttribute('id', 'sliderValue');
+    background-color: lightgrey;
-sliderValue.textContent = '1000';
+}
-sliderValue.style.color = 'white'
-sliderValue.style.fontSize = '300%'
-// Append elements to the container div
+#notification {
-sliderContainer.appendChild(minLabel);
+    display: none;
-sliderContainer.appendChild(rangeInput);
+    position: fixed;
-sliderContainer.appendChild(maxLabel);
+    text-wrap: wrap;
+    color: #e9e9e9;
+    background-color: green;
+    border-color: grey;
+    transition: top 1s;
+    padding-left: 2%;
+    padding-right: 2%;
+    padding-top: 0.5%;
+    padding-bottom: 0.5%;
+    font-size: 160%;
+  -webkit-user-select: none; /* Safari */
+    -moz-user-select: none; /* Firefox */
+    -ms-user-select: none; /* IE10+/Edge */
+    user-select: none; /* Standard */
+    top: 2%;
+    right: 3%;
+    z-Index: 1;
+}
+/* https://stackoverflow.com/a/6900392/19515980 */
-// Append container div and slider value display to the body
+#notification:hover{
-pitchStuff.appendChild(sliderContainer);
+    cursor: pointer;
-pitchStuff.appendChild(sliderValue);
+    opacity: 0.9;
+}
+</style>
+<div id='notification'> </div>
+    <body>
+        <h3 id = 'question'>Question goes here</h3>
+        <h4 id = 'instructions'> Instructions go here</h4>
+      <input id='tBox' class="answer-box"  min="0" max="5"></input>
+<br>
+    <!-- generated by BardAI -->
+<div class="grid-container">
+  <div class="grid-item">1</div>
+  <div class="grid-item">2</div>
+  <div class="grid-item">3</div>
+  <div class="grid-item">4</div>
+  <div class="grid-item">5</div>
+  <div class="grid-item">6</div>
+  <div class="grid-item">7</div>
+  <div class="grid-item">8</div>
+  <div class="grid-item">9</div>
+  <div class="grid-item">0     </div>
+  <div id='deleteText'class="grid-item"><--</div>
+  <div class="grid-item" id='nextQButton'>Finish </div>
+</div>
+<!-- Number pad from w3 schools : https://www.w3schools.com/css/tryit.asp?filename=trycss_grid -->
+<!-- https://www.w3schools.com/css/css_grid.asp -->
+        <script>
+            // --------------------------------------------------------------------------
+// -- value-calculator.js
+// --------------------------------------------------------------------------
+// Code made using Github Copilot and Google Bard
+// Translation helped by Google Translate
-document.documentElement.appendChild(pitchStuff)
+document.body.style.opacity = 0
+//let referrer = 'https://renickbell.net/middleschool/doku.php?id=students:steve-value-calculator-referrer'
+//This line is written by Yiler
+let referrerFrom = "https://renickbell.net/ed/2024worth/doku.php?id=students:value-calculator-3"
+let referrerTo = "https://renickbell.net/ed/2024worth/doku.php?id=students:value-calculator"
+// let resultsPageLink = 'https://renickbell.net/middleschool/doku.php?id=students:steve-value-calculator-results-page'
+let resultsPageLink = 'https://renickbell.net/ed/2024worth/doku.php?id=students:value-calculator-results'
-// Find the HTML element with the id "mySlider"
+let mode = 'doku'
-var mySlider = document.getElementById('mySlider');
-// Create a <style> element
+let language = 'English'
-var styleElement = document.createElement('style');
-// Define CSS rules for the .slider class
+let conditions= {
-var cssText = '.slider {' +
+    P: 0.23, //Max 15
-                '-webkit-appearance: none;' +
+    V: 0.17, //Max 5
-                'width: 150%;' +
+    M: 0.12, //Max 5
-                'height: 25px;' +
+    S: 0.12, //Max 15
-                'background: #d3d3d3;' +
+    R: 0.10, //Max 5
-                'outline: none;' +
+    I: 0.12, //Max 5
-                'opacity: 0.7;' +
+    B: 0.06, //Max 5
-                '-webkit-transition: .2s;' +
+    E: 0.05, //Max 5
-                'transition: opacity .2s;' +
+    A: 0.04, //Max 5
-                'transform: rotate(90deg);' + // Add the transform property
+}
-              '}' +
-              '.slider:hover {' +
-                'opacity: 1;' +
-              '}' +
-              '.slider::-webkit-slider-thumb {' +
-                '-webkit-appearance: none;' +
-                'appearance: none;' +
-                'width: 25px;' +
-                'height: 75px;' +
-                'background: #04AA6D;' +
-                'cursor: pointer;' +
-              '}' +
-              '.slider::-moz-range-thumb {' +
-                'width: 25px;' +
-                'height: 75px;' +
-                'background: #04AA6D;' +
-                'cursor: pointer;' +
-              '}';
-// Set the CSS rules as text content of the <style> element
+let total = {
-styleElement.textContent = cssText;
+    P: 15,
+    V: 5,
+    M: 5,
+    S: 15,
+    R: 5,
+    I: 5,
+    B: 5,
+    E: 5,
+    A: 5,
+}
-// Append the <style> element to the <head> section of the HTML document
+let minumumTotal = {
-document.documentElement.appendChild(styleElement);
+    P: 0,
+    V: 0,
+    M: 0,
+    S: 0,
+    R: 0,
+    I: 0,
+    B: 0,
+    E: 0,
+    A: 0,
+}
+//Each answer is based on 0 to 5 except P is 0 - 5,
-// Find the HTML element with the id "min"
+let compButton = document.getElementById('compareResults')
-var min = document.getElementById('min');
-// Apply styles to the "min" element
+function valueCalc (options){
-min.style.top = '1%';
+    let total = 0
-min.style.left = '45%';
+    Object.keys(conditions).forEach(x =>{
-min.style.position = 'absolute';
+        if (options[x] === undefined){
-min.style.fontSize = '200%'
+            total += conditions[x]
+        }
+        else {
+            console.log('caculating' + x)
+            total += conditions[x] * options[x]
+        }
+    })
+    return total
+}
-// Find the HTML element with the id "max"
+let currentName= ''
-var max = document.getElementById('max');
+let questions  = {
+    P: {qE: 'How many positive personal qualities of NAME can you list in 50 seconds?', qC: '你在50秒以内能想到幾個 NAME 的正面個人特質？', type: 'list' },
+    V:  {qE:'How ethical is NAME ? 0- not ethical at all, 5- completely ethical', qC: ' NAME 的思想價值觀符合道德嗎？ 0- 一點都不符合道德， 5- 無時無刻都是完全符合道德的', type: 'outOf5' },
+    M:  {qE:'What is the degree of wealth of NAME ? 0- extremely poor 5- extremely wealthy', qC: ' NAME 物質方面的富裕程度如何？ 0- 非常平窮， 5- 非常富裕', type:'outOf5' },
+    S:  {qE:'How many positive social contributions that NAME has made can you think of in 50 seconds?', qC: '你在50秒以内能想到幾個 NAME 做過的社會性貢獻？', type:'list' },
+    R:  {qE:'How socially skilled is NAME ? 0- Very Bad, 5- Very Good', qC: ' NAME 的社交能力如何？ 0- 非常不好， 5- 非常好', type: 'outOf5'},
+    I:  {qE:"How positive is NAME ’s public image? 0- very bad, 5- very good", qC: ' NAME 的公衆形象如何？ 0- 形象非常不好， 5- 形象非常好', type:'outOf5' },
+    B:  {qE:'How skilled is NAME in their area of expertise/profession? 0- extremely unskilled, 5- extremely skilled', qC: ' NAME 在自己的專業領域裏的能力如何？ 0- 能力非常低， 5- 能力非常高', type:'outOf5' },
+    E:  {qE:'What is NAME ’s level of education? 0- elementary school or below, 1- completed middle school, 2- completed high school, 3- completed university, 4- completed Masters Degree, 5- completed PhD or above', qC: ' NAME 的教育程度是什麽？ 0- 小學畢業或以下， 1- 國中畢業， 2- 高中畢業， 3- 大專畢業， 4- 碩士畢業， 5- 博士畢業和以上', type:'outOf5' },
+    A:  {qE:"Does NAME ’s behavior follow laws, rules, and publicly shared norms? 0- never, 5- always", qC: ' NAME 的行爲是否遵守法律，規定，和社會共識規範？ 0- 從不， 5- 總是', type: 'outOf5'},
+}
+//translation helped by google translate.
-// Apply styles to the "max" element
+function changeNotificationLanguage (){
-max.style.left = '40%';
+    let notificationBoxContent = notificationBox.innerText.split(' ')
-max.style.top = '90%';
+    if (language === 'English' && notificationBoxContent[notificationBoxContent.length - 1] === 'entered.'){
-max.style.position = 'absolute';
+        notificationBox.innerText = 'Information successfully entered and saved for' + answers[answers.length - 1].name.toUpperCase() + '. Please enter information for at least one other subject to compare results.'
-max.style.fontSize = '200%'
+    }
+    else if (language === 'English'){
+        notificationBox.innerText = 'Information successfully entered and saved for' + answers[answers.length - 1].name.toUpperCase() + '. Click See Results button to see and compare results for the subjects entered.'
+    }
+    else if (notificationBox.innerText[notificationBox.innerText.length - 1] === '字'){
+        notificationBox.innerText = answers[answers.length - 1].name.toUpperCase() + '的資料與數據成功的記錄了。按 See Results 來查閲兩位受評量者的個人價值比較。'
+    }
+    else {
+        notificationBox.innerText = answers[answers.length - 1].name.toUpperCase() + '的資料與數據成功的記錄了。請輸入下一位受評量者的名字。'
+    }
+}
-// Find the HTML element with the id "enterM"
+function changeNamePageLanguage (){
-var enterM = document.getElementById('enterM');
+    if (language === 'English'){
+        document.getElementById('question').innerText = 'Enter name of new subject'
+        document.getElementById('instructions').innerText = 'Enter name of subject and press enter key or finish button to start quiz.'
+    }
+    else {
+        document.getElementById('question').innerText = '輸入受評量者名字。'
+        document.getElementById('instructions').innerText = '輸入受評量者名字，按輸入鍵或 结束 鍵開始評量。'
+    }
+}
-// Apply styles to the "enterM" element
+function changeLanguage (){
-enterM.style.position = 'absolute';
+    let q = Object.values(questions)[qIndex]
-enterM.style.right = '0%';
+    nextQAnimation()
-enterM.style.fontSize = '300%';
+    if (document.getElementById('tBox').type === 'number'){
+        document.getElementById('question').innerText = updateQ(q)
+        changeInstructions(q.type)
+    }
+    else{
+        changeNamePageLanguage()
+    }
+    if (language === 'Chinese'){
+        document.getElementById('nextQButton').innerText = '结束'
+        document.getElementById('compareResults').innerText = '查看結果'
+    }
+    else {
+        document.getElementById('nextQButton').innerText = 'Finish'
+        document.getElementById('compareResults').innerText = 'See Results'
+    }
+    if (notificationBox.style.display === 'block'){
+        changeNotificationLanguage()
+    }
+}
-// Find the HTML element with the id "enterF"
+function updateQ (x){
-var enterF = document.getElementById('enterF');
+    let q = x.qE
+    if (language === 'Chinese'){
+        q = x.qC
+    }
+    let  currentQ = q.split(' ')
+    console.log('name index' +q.split(' ').indexOf('NAME'))
+    currentQ[q.split(' ').indexOf('NAME')] = currentName.toUpperCase()
+    return currentQ.join(' ')
+}
-// Apply styles to the "enterF" element
+function changeInstructions(type){
-enterF.style.position = 'absolute';
+    if (language === 'English' && type === 'list'){
-enterF.style.right = '0%';
+        document.getElementById('instructions').innerText = 'Write the number of examples you can think of. The more the better. No more than 15. (50 Seconds)'
-enterF.style.top = '60%';
+    }
-enterF.style.fontSize = '300%';
+    else if (language === 'English'){
-enterF.style.color = 'pink';
+        document.getElementById('instructions').innerText = 'Give a score of 0-5 (35 Seconds).'
+    }
+    else if (language === 'Chinese' && type === 'list'){
+        document.getElementById('instructions').innerText = '輸入你能想到的總數目。不超過15個。(50秒)'
+    }
+    else {
+        document.getElementById('instructions').innerText = '給 0-5 的分數 （35 秒）'
+    }
+}
+//google translate used for some translation.
-// Find the HTML element with the id "back"
+function changeQ (x){
-var back = document.getElementById('back');
+            document.getElementById('question').innerText = updateQ(x)
+            changeInstructions(x.type)
+            if (x.type === 'list'){
+                document.getElementById('tBox').max = 15
+                stopCountdown()
+                timerState = 'done'
+                countdownEnded()
+                setTimeout(() => {
+                    startCountdown(50)
+                    let currentQIndex = qIndex
+                    setTimeout(() => {
+                        if (qIndex == currentQIndex && qIndex !== undefined){
+                            alert('Out of time will proceed to next question')
+                            document.getElementById('tBox').value = '0'
+                            nextQ()
+                        }
+                    }, 49990)
+                }, 1000)
+            }
+        else {
+            document.getElementById('tBox').max = 5
+            stopCountdown()
+            timerState = 'done'
+            countdownEnded()
+            setTimeout(() => {
+                startCountdown(35)
+                let currentQIndex = qIndex
+                setTimeout(() => {
+                    if (qIndex == currentQIndex && qIndex !== undefined){
+                        alert('Out of time will proceed to next question')
+                        document.getElementById('tBox').value = '0'
+                        nextQ()
+                    }
+                }, 34990)
+            }, 1000)
+        }
+    }
-// Apply styles to the "back" element
+function recordListAnswer (n){
-back.style.position = 'absolute';
+    if (n > 15){
-back.style.left = '0px';
+        return 15
-back.style.top = '25%';
+    }
+    else if (n < 0){
+        return 0
+    }
+    return n
+}
-// Find the HTML element with the id "average"
+function record0To5Answer (n){
-var average = document.getElementById('average');
+    if (n < 0){
+        return 0
+    }
+    else if (n > 5){
+        return 5
+    }
+    return n
+}
-// Apply styles to the "average" element
+function recordAnswers (){
-average.style.position = 'absolute';
+    let ans = document.getElementById('tBox').value
-average.style.left = '0px';
+    let instructions = document.getElementById('instructions').innerText
-average.style.top = '30%';
+    if (instructions === 'Remember the total number of answers you can think of write and the number down. The more the better. No more than 15. (50 Seconds)'){
+        answeredTotal[Object.keys(conditions)[qIndex]] = recordListAnswer(JSON.parse(ans))
+    }
+    else {
+        answeredTotal[Object.keys(conditions)[qIndex]] = record0To5Answer(JSON.parse(ans))
+    }
+document.getElementById('tBox').value = ''
+}
-// --------------------------------------------------------------------------
+//Timer:
-// -- test.js
-// --------------------------------------------------------------------------
-// GAIN NOT WORKING PROPERLY
-function downloadTextFile(content, filename) {
+function roundOff (number,decimalPlaces){
-  const blob = new Blob([content], { type: 'text/plain' });
+let roundedNumber=number.toFixed(decimalPlaces);
+return JSON.parse(roundedNumber)}
-  const link = document.createElement('a');
+let timeLeft = 0
-  link.href = window.URL.createObjectURL(blob);
+let timerState = 'done'
-  link.download = filename;
-  // Append the link to the document
+function clockFormat (){
-  document.body.appendChild(link);
+    let minutes=JSON.stringify(Math.floor(timeLeft/60))
+    let seconds=timeLeft%60
+    if (minutes=='0'){
+        minutes='00'
+    }
+    if (seconds<10){
+        seconds='0'+JSON.stringify(seconds)
+    }
+    return minutes+':'+seconds
+}
-  // Trigger a click on the link to initiate the download
+function startCountdown (totalTime){
-  link.click();
+    timeLeft=totalTime
+    timerState='down'
+    timerCountdown()
+}
-  // Remove the link from the document
+function timerCountdown (){
-  document.body.removeChild(link);
+    if (timeLeft==0){
+        timerState='done'
+        countdownEnded()
+    }
+    if (timerState=='down'){
+        timeLeft-=1
+        document.getElementById('timer').textContent=clockFormat()
+        checkIfTimerRunningOut()
+        setTimeout(()=>{
+            timerCountdown()
+        },1000)
+    }
+    else{
+        document.getElementById('timer').style.color='red'
+    }
 }
-// Example usage
+function checkIfTimerRunningOut (){
+    if (timeLeft<=5){
+    new Audio('timer-running-out.mp3').play()
+    }
+    if (timeLeft==0){
+        new Audio('timer-end.mp3').play()
+    }
+}
-let averageN = 8105.972222222223
-let data = []
+function stopCountdown (){
+    timerState='stopped'
+    document.getElementById('timer').style.color='white'
+}
-let dataString = ''
+function countdownEnded (){
+    if (timerState!='done'){
+        return true
+    }
+    if (document.getElementById('timer').style.color=='white'){
+        document.getElementById('timer').style.color='red'
+    }
+    else{
+        document.getElementById('timer').style.color='white'
+    }
+    setTimeout(()=>{
+        countdownEnded ()
+    },1000)
+}
-function startOscillator (){
-    let oscillator = audioContext.createOscillator();
+function resumeCountdown (){
-    oscillator.connect(audioContext.destination);
+    timerState='down'
-    oscillator.frequency.setValueAtTime(1000, audioContext.currentTime);
+    timerCountdown()
-    return oscillator
+    document.getElementById('timer').style.color='white'
 }
-/*
+function pauseCountdown (){
-let audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    timerState='paused'
-let oscillator = startOscillator()
+}
-oscillator.start();
-*/
-let audioContext;
-let oscillator;
-// document.addEventListener('click', function() {
+function blinkCompButton (){
-//     if (audioContext === undefined){
+    let compButton = document.getElementById('compareResults')
-//         console.log('creating')
+    for (let i = 0; i < 6; i++) {
+        let a = i - 1
+        if (a < 0){
+            a = 0
+        }
+        setTimeout(() => {
+            compButton.style.color = 'red'
+        }, 1000 * i + 500)
+    }
+    for (let i = 0; i < 5; i++) {
+        setTimeout(() => {
+            compButton.style.color = 'grey'
+        }, 1000 * i)
+    }
+}
-//         audioContext = new (window.AudioContext || window.webkitAudioContext)();
+function removeAllExceptSeeResults (){
-//         oscillator = startOscillator()
+    nextQAnimation()
-//         oscillator.start();
+    let bodyChildren = document.body.childNodes
-//         document.body.style.backgroundColor = 'red'
+    if (mode === 'doku'){
+        bodyChildren = document.getElementsByClassName('level1')[0].childNodes
+    }
+    for (let i = 0; i < bodyChildren.length; i++) {
+        if (bodyChildren[i].id !== 'compareResults'){
+            bodyChildren[i].remove()
+        }
+    }
+    let compButton = document.getElementById('compareResults')
+    compButton.style.width = '100%'
+    compButton.style.height = '50%'
+    compButton.style.position = 'absolute'
+    compButton.style.display = 'block'
+    if (mode === 'doku'){
+        compButton.style.top = '35%'
+    }
+    else {
+        compButton.style.top = '25%'
+    }
+    compButton.style.left = '0%'
+    blinkCompButton()
+}
+function checkIfCompareResults (){
+    if (answers.length === 2){
+        let compButton = document.getElementById('compareResults')
+        compButton.href = createLinkWithData(resultsPageLink)
+        compButton.style.position = 'absolute'
+        compButton.style.display = 'block'
+//         compButton.style.top = '-100%'
+//         setTimeout(() => {
+//             if (window.innerWidth < window.innerHeight){
+//                 compButton.style.width = '100%'
+//             }
+//             else {
+//                 compButton.style.width = '50%'
+//             }
+//             compButton.style.top = '150%'
+//         }, 1000)
+//          setTimeout(() => {
+//              compButton.style.position = 'relative'
+//              compButton.style.top =  'auto'
+//          }, 2002)
+        removeAllExceptSeeResults()
+    }
+    else if (answers.length > 2){
+        let compButton = document.getElementById('compareResults')
+        compButton.style.display = 'block'
+        compButton.href = createLinkWithData(resultsPageLink)
+    }
+}
+let qIndex = 0
+let answeredTotal = {}
+let lastName = ''
+let virtualKeyboardAPI = navigator.virtualKeyboard
+let answers = []
+function nextQ (){
+//     if (currentName === '' || currentName === lastName){
+//         alert('Please enter name')
+//         return false
+//     }
+    if (isNaN(document.getElementById('tBox').value) === true && document.getElementById('tBox').type === 'number'){
+        notifyUser('Please input a number')
+        return false
+    }
+    else if (document.getElementById('tBox').value === ''){
+        notifyUser('Please input something')
+        return false
+    }
+    if (qIndex === Object.keys(questions).length - 1){
+//         showResults()
+        nextQAnimation()
+        console.log(valueCalc(answeredTotal))
+        answers.push({name: currentName, score: valueCalc(answeredTotal)})
+        stopQuiz()
+        checkIfCompareResults()
+        return false
+    }
+    deactivateGridEvents()
+    recordAnswers()
+    qIndex++
+    document.getElementById('tBox').value = ''
+    nextQAnimation()
+    setTimeout(() => {
+        changeQ(Object.values(questions)[qIndex])
+    }, 100)
+    setTimeout(() => {
+        activateGridEvents()
+    }, 500)
+}
+// changeQ(questions.P)
+function resetQuiz (){
+    qIndex = 0
+    answeredTotal = {}
+}
+let notificationBox = document.getElementById('notification')
+notificationBox.onpointerup = hideNotification
+function hideNotification (){
+        notificationBox.style.top = '-100%'
+        setTimeout(() => {
+            notificationBox.style.display = 'none'
+            notificationBox.style.transition = 'none'
+            notificationBox.style.top = '2%'
+            notificationBox.style.right = '3%'
+            notificationBox.style.transition = ''
+        }, 1000)
+}
+function showNotification () {
+//     notificationBox.style.transition = ''
+    notificationBox.style.display = 'block'
+}
+function notifyUser (message){
+    notificationBox.innerText = message
+    showNotification()
+    setTimeout(() => {
+        if (notificationBox.style.display === 'block'){
+            hideNotification()
+        }
+    }, 8000)
+}
+function notifyUserInfoSaved (){
+    if (language === 'English'){
+        notifyUser('Information successfully entered and saved for ' + answers[answers.length - 1].name.toUpperCase() + '. Please enter information for at least one other subject to compare results.')
+    }
+    else {
+        notifyUser(answers[answers.length - 1].name.toUpperCase() + '的資料與數據成功的記錄了。請輸入下一位受評量者的名字。')
+    }
+}
+function notifyUserToCompareResults (){
+    if (language === 'English'){
+        notifyUser('Information successfully entered and saved for' + answers[answers.length - 1].name.toUpperCase() + '. Click See Results button to see and compare results for the subjects entered.')
+    }
+    else {
+        notifyUser(answers[answers.length - 1].name.toUpperCase() + '的資料與數據成功的記錄了。按 See Results 來查閲兩位受評量者的個人價值比較。')
+    }
+}
+function stopQuiz (){
+    qIndex = undefined
+//     document.getElementById('name').value = ''
+//     pauseCountdown()
+    stopCountdown()
+    timerState = 'done'
+    countdownEnded()
+    lastName = currentName
+    currentName = ''
+    newQuizSubject()
+    setTimeout(() => {
+        if (answers.length === 1){
+            notifyUserInfoSaved()
+        }
+        else {
+            notifyUserToCompareResults()
+        }
+    }, 200)
+//     document.getElementById('tBox').onfocus = undefined
+//     document.getElementById('tBox').onkeypress = undefined
+}
+// answeredTotal = {
+//     P: 5,
+//     V: 5,
+//     M: 5,
+//     S: 15,
+//     R: 5,
+//     I: 5,
+//     B: 5,
+//     E: 5,
+//     A: 5,
 // }
-// })
+// //Each answer is based on 0 to 5 except P is 0 - 5,
+//A function that creates a ruler like thing that shows the value of the person.
+function showResults () {
+    let results = document.getElementById('results')
+//     results.innerHTML = ''
+//     let results = valueCalc(answeredTotal)
+    let ruler = document.createElement('div')
+    ruler.style.width = '10%'
+    ruler.style.height = '80%'
+    ruler.style.border = '10px solid black'
+    ruler.style.position = 'relative'
+    //center ruler horizontal in page:
+    ruler.style.left = '45%'
+    ruler.style.top = '-10%'
+    //show text above ruler that says max is 8.5
+    let max = document.createElement('p')
+    max.innerText = 'Max is 8.4'
+    max.style.position = 'relative'
+    max.style.top = '0px'
+    max.style.left = '0%'
+    max.style.fontSize = '20px'
+    max.style.fontWeight = 'bold'
+    max.style.left = '45%'
+max.style.width = '30%'
+    //show text below ruler that says min is 0
+    let min = document.createElement('p')
+    min.innerText = 'Min is 0'
+    min.style.position = 'relative'
+    min.style.top = '84%'
+    min.style.fontSize = '20px'
+    min.style.fontWeight = 'bold'
+    min.style.left = '45%'
+    min.style.width = '30%'
+    let value = valueCalc(answeredTotal)
+    let rect = document.createElement('div')
+    rect.style.width = '20%'
+    rect.style.height = '3%'
+    rect.style.backgroundColor = 'red'
+    rect.style.position = 'relative'
+    rect.style.top = 80 - (value/8.5 * 100) + '%'
+    rect.style.left = '42%'
+    rect.innerText = roundOff(value, 1)
+    rect.style.zIndex = '1'
+    rect.style.fontWeight = 'bold'
+    rect.style.textAlign = 'center'
+//     rect.id = 'rect'
+    if (JSON.parse(rect.style.top.slice(0, rect.style.top.length - 1)) > 74){
+        rect.style.top = '74%'
+    }
+    else if (JSON.parse(rect.style.top.slice(0, rect.style.top.length - 1)) < -7){
+        rect.style.top = '-7%'
+    }
+    results.appendChild(max)
+    results.appendChild(min)
+    results.appendChild(rect)
+    results.appendChild(ruler)
-document.getElementById("mySlider").addEventListener("input", function() {
+}
-//     audioContext = new (window.AudioContext || window.webkitAudioContext)();
-//     oscillator = startOscillator()
-//     oscillator.start();
-  const sliderValue = document.getElementById("mySlider").value;
-    console.log('gain',(1000 - JSON.parse(sliderValue))/950)
-  document.getElementById("sliderValue").innerHTML = sliderValue;
-  oscillator.frequency.setValueAtTime(sliderValue, audioContext.currentTime);
-});
-document.getElementById('hi').onclick = function (){
-    if (audioContext === undefined){
-        document.documentElement.style.backgroundColor = 'black'
+// Show text on the top that shows max is 8.5 and min is 0 show that text below. Put all that in the results div.
-        audioContext = new (window.AudioContext || window.webkitAudioContext)();
-        oscillator = startOscillator()
+// showResults()
-        oscillator.start();
-        hi.remove()
+// make is so when tBox is focused and enter is clicked, nexQ fuction will be called:
+function preventNonNumericalInputs (e){
+      if (e.keyCode < 48 || e.keyCode > 57) {
+           e.preventDefault();
+          return false
+      }
+}
+function startQuiz (e){
+    currentName = document.getElementById('tBox').value
+    if (currentName === ''){
+        alert('Please enter name')
+        return false
+    }
+    else if (currentName === lastName){
+        alert('Please give new subject a different name.')
+        return false
+    }
+    console.log('updated name', currentName)
+    document.getElementById('tBox').value = ''
+    document.getElementById('tBox').type = 'number'
+    document.getElementById('tBox').inputMode = 'number'
+    document.getElementById('tBox').onkeypress = undefined
+    nextQAnimation()
+    setTimeout(() => {
+        resetQuiz()
+        changeQ(questions.P)
+    })
+    document.getElementById('tBox').onkeypress = function (e){
+        if (e.key === 'Enter'){
+            nextQ()
+        }
+        let tBox = document.getElementById('tBox')
+        if (tBox.type === 'number' && preventNonNumericalInputs(e) === false){
+            console.log('non numerical input found ignoring')
+            return false
+        }
+        setTimeout(() => {
+            console.log(tBox.value, tBox.max)
+            if (JSON.parse(tBox.value) > JSON.parse(tBox.max)){
+                tBox.value = tBox.max
+            }
+            else if (JSON.parse(tBox.value) < JSON.parse(tBox.min)){
+                tBox.value = tBox.min
+            }
+        }, 100)
     }
 }
-//YOOO
+function hideTboxVirtualKeyboard (){
+    tBox.readOnly = true
+    tBox.disabled = true
+    tBox.blur()
+    tBox.readOnly = false
+    tBox.disabled = false
+}
+// From: https://stackoverflow.com/a/11160055/19515980
-document.getElementById('enterM').innerText = '-->'
+function nextQAnimation (){
-document.getElementById('enterF').innerText = '-->'
+    hideTboxVirtualKeyboard()
+    scroll(0, 0)
+    document.body.style.opacity = '0'
+    setTimeout(() => {
+        document.body.style.opacity = '1'
+    }, 200)
+}
-document.getElementById('enterM').onclick = function (){
+function newQuizSubject (){
-    data.push({gender: 'M', value: document.getElementById("mySlider").value})
+    changeNamePageLanguage()
-    oscillator.frequency.setValueAtTime(7751.952380952381 , audioContext.currentTime);
+    document.getElementById('tBox').type = 'text'
-    dataString += 'M,' + document.getElementById("mySlider").value.toString() + '\n'
+    document.getElementById('tBox').value = ''
+    document.getElementById('tBox').onkeypress = function (e){
+        if (e.key === 'Enter'){
+            startQuiz(e)
+        }
+    }
 }
-document.getElementById('enterF').onclick = function (){
+newQuizSubject()
-    data.push({gender: 'F', value: document.getElementById("mySlider").value})
-    oscillator.frequency.setValueAtTime(8601.6 , audioContext.currentTime);
+function handleNextQButton (e){
-    dataString += 'F,' + document.getElementById("mySlider").value.toString() + '\n'
+    keyClickedAnimation(gridItems[11])
+    if (currentName === '' || currentName === lastName){
+        startQuiz(e)
+    }
+    else{
+        nextQ()
+    }
 }
-document.getElementById('average').onclick = function (){
-    oscillator.frequency.setValueAtTime(8105.972222222223 , audioContext.currentTime);
+// function getValue (){
+//     return document.getElementById('tBox').value
+// }
+// let tBox = document.getElementById('tBox')
+// document.getElementById('tBox').addEventListener('keydown', function(event) {
+//     setTimeout(() => {
+//   if (isNaN(event.key) === true) {
+//       console.log('wrong', getValue())
+//       tBox.value = getValue().slice(0, -1 )
+//   }
+//     })
+// });
+let gridItems = document.getElementsByClassName('grid-item')
+function activateGridEvents (){
+    if (gridItems[0].onpointerup !== null){
+        return false
+    }
+    for (let i = 0; i < gridItems.length; i++) {
+        let x = gridItems[i]
+        if (x.id === 'deleteText'){
+            x.onpointerup = function (e) {
+                console.log('delete clicked')
+                let tBox = document.getElementById('tBox')
+                tBox.value = tBox.value.slice(0, tBox.value.length - 1)
+    //             e.target.style.fontSize = '300%'
+                keyClickedAnimation(e.target)
+            }
+        }
+        else if (x.id !== 'nextQButton'){
+            x.onpointerup = function (e) {
+                let value = e.target.innerText
+                console.log('hi', value)
+                document.getElementById('tBox').value += value
+    //             e.target.style.fontSize = '300%'
+                keyClickedAnimation(e.target)
+                setTimeout(() => {
+                    console.log(tBox.value, tBox.max)
+                    if (JSON.parse(tBox.value) > JSON.parse(tBox.max)){
+                        tBox.value = tBox.max
+                    }
+                    else if (JSON.parse(tBox.value) < JSON.parse(tBox.min)){
+                        tBox.value = tBox.min
+                    }
+                }, 100)
+            }
+        }
+    }
+    document.getElementById('nextQButton').onpointerup = handleNextQButton
 }
-document.getElementById('back').onclick = function (){
+activateGridEvents()
-    if (audioContext === undefined){
-        document.documentElement.style.backgroundColor = 'black'
+function deactivateGridEvents (){
-        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    if (gridItems[0].onpointerup === null){
-        oscillator = startOscillator()
+        return false
-        oscillator.start();
+    }
+    for (let i = 0; i < gridItems.length; i++) {
+        let x = gridItems[i]
+        x.onpointerup = null
     }
 }
-document.getElementById('back').remove()
-// Function to prevent scrolling
+function keyClickedAnimation (e){
-function preventScroll(event) {
+    e.style.color = 'black'
-    event.preventDefault();
+    setTimeout(() => {
+//                 e.target.style.fontSize = '200%'
+        e.style.color = 'white'
+    }, 100)
 }
-// Add event listener to the window object
+document.getElementById('tBox').addEventListener('keyup', function (e){
-window.addEventListener('wheel', preventScroll, { passive: false });
+        console.log(e.key)
+    if (isNaN(e.key) === false){
+        keyClickedAnimation(gridItems[JSON.parse(e.key) - 1])
+    }
+    else if(e.key === 'Backspace'){
+        keyClickedAnimation(gridItems[10])
+    }
+    else if (e.key === 'Enter'){
+        keyClickedAnimation(gridItems[11])
+    }
+})
-mySlider.style.top = '50%'
+function getInformationFromLink (baseLink){
-mySlider.style.left = '-25%'
+    let fullLink = window.location.href
-mySlider.style.position = 'absolute'
+    let info;
-removeCrap()
+    if (baseLink !== undefined){
-//slider code from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_rangeslider
+        fullLink.slice(baseLink.length).split('&')
-</script>
+    }
+    else {
+        info = fullLink.split('&').slice(1)
+    }
+    let data = {}
+    data[info[0]] = info[1]
+    data[info[2]] = info[3]
+    return data
+}
+//Idea for using & character for passing information inspired by bardAI
+function createLinkWithData (link){
+    let outputLink = link
+    answers.forEach(x => {
+        outputLink += '&' + x.name.replace(/ /g, "-") + '&' + x.score
+    })
+//     return link + '&'  + answers[0].name + '&' + answers[0].score + '&' + answers[1].name + '&' + answers[1].score
+    return outputLink
+}
+function configureStylingForDokuWiki (){
+    document.getElementsByClassName('dokuwiki')[0].style.backgroundColor='#262626'
+    document.getElementsByClassName('page panel-body')[0].style.backgroundColor= '#262626'
+    document.getElementsByClassName('panel panel-default px-3 py-2')[0].style.backgroundColor= '#262626'
+    document.getElementsByClassName('panel panel-default px-3 py-2')[0].style.border = 'none'
+    notificationBox.style.top = '10%'
+    let homeButton = document.getElementsByClassName('navbar-brand d-flex align-items-center')[0].cloneNode()
+    //Remove navbar:
+    document.getElementsByClassName('dw-container container-fluid mx-5')[0].remove()
+    setTimeout(() => {
+        document.getElementById('tBox').className = "answer-box"
+        document.getElementsByClassName('media')[0].onclick = function (){window.open('https://renickbell.net/middleschool/doku.php?id=start')}
+        document.getElementsByClassName('tools panel panel-default affix-top')[0].remove()
+         compButton = document.getElementById('compareResults')
+    }, 50)
+}
+function checkReferrer (){
+    if (document.referrer !== referrerFrom){
+        removeAllExceptSeeResults()
+        document.getElementById('compareResults').href = referrerTo
+        if (language === 'English'){
+            document.getElementById('compareResults').innerText = 'See disclaimer first'
+        }
+        else {
+            document.getElementById('compareResults').innerText = '先看說明'
+        }
+    }
+}
+window.addEventListener('load', function() {
+    if (mode === 'doku'){
+        let copy = document.getElementsByClassName('dw-content')[0]
+        let navbar = document.getElementsByClassName("navbar-brand d-flex align-items-center" )[0]
+        let newBody = document.createElement('body')
+        newBody.appendChild(copy)
+        newBody.appendChild(navbar)
+        document.body.remove()
+        document.documentElement.appendChild(newBody)
+        copy.style.top = '20%'
+        document.documentElement.style.boxSizing = 'none'
+        document.body.style.marginTop = '0px'
+//         configureStylingForDokuWiki()
+        checkReferrer()
+    }
+    nextQAnimation()
+   changeLanguage()
+})
+    value_calculator.style.color = 'white'
+question.style.color = 'white'
+instructions.style.color = 'white'
+        </script>
+<br>
+        <div id='timer'> 10:00</div>
+<button id='compareResults' onclick="window.open(this.href, '_blank');">See Results</button>
+    </body>
 </html>