students:value-calculator-quiz [Worth]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Value calculator ======

<html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Code made using Github Copilot and Google Bard -->
<style>
/* cODE MAde using Github Copilot Google Bard  */
/* 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;
}


#nextQButton {
  background-color: green;
  color: white;
}

#tBox{
    width: 99.5%;
    height: 30%;
    font-size: 600%;
  color: white;
  background-color: #262626;
    border-style:solid;
    border-width: 1px;
    border-color: silver;
}


#question {
    position: relative;
    text-wrap: wrap;
    width: 99%;
    font-size: 400%;
}

#timer{
    background-color: #262626;
    text-align: center;
    width: 18%;
    padding:2px;
    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 */

#instructions{
    text-wrap: wrap;
    left: min(100px, 3%);
    max-width: 94%;
    font-size: 200%;
}

/* Text wrap: https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap */

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #262626;
  vertical-align: center;
}

.grid-item {
  left: 0%;
  background-color: #262626;
  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 */

.grid-item:hover{
    cursor: pointer;
}

#compareResults{
    color: red;
    background-color: black;
    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;
}

@media (orientation: portrait) {
    .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
    }
}


#compareResults:hover{
    cursor: pointer;
    background-color: lightgrey;
}

#notification {
    display: none;
    position: fixed;
    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 */

#notification:hover{
    cursor: pointer;
    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.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'

let mode = 'doku'

let language = 'English'

let conditions= {
    P: 0.23, //Max 15
    V: 0.17, //Max 5
    M: 0.12, //Max 5
    S: 0.12, //Max 15
    R: 0.10, //Max 5
    I: 0.12, //Max 5
    B: 0.06, //Max 5
    E: 0.05, //Max 5
    A: 0.04, //Max 5
}

let total = {
    P: 15,
    V: 5,
    M: 5,
    S: 15,
    R: 5,
    I: 5,
    B: 5,
    E: 5,
    A: 5,
}

let minumumTotal = {
    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,

let compButton = document.getElementById('compareResults')

function valueCalc (options){
    let total = 0
    Object.keys(conditions).forEach(x =>{
        if (options[x] === undefined){
            total += conditions[x]
        }
        else {
            console.log('caculating' + x)
            total += conditions[x] * options[x]
        }
    })
    return total
}

let currentName= ''
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.

function changeNotificationLanguage (){
    let notificationBoxContent = notificationBox.innerText.split(' ')
    if (language === 'English' && notificationBoxContent[notificationBoxContent.length - 1] === 'entered.'){
        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.'
    }
    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() + '的資料與數據成功的記錄了。請輸入下一位受評量者的名字。'
    }
}

function changeNamePageLanguage (){
    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 = '輸入受評量者名字，按輸入鍵或 结束 鍵開始評量。'
    }
}

function changeLanguage (){
    let q = Object.values(questions)[qIndex]
    nextQAnimation()
    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()
    }
}

function updateQ (x){
    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(' ')
}

function changeInstructions(type){
    if (language === 'English' && type === 'list'){
        document.getElementById('instructions').innerText = 'Write the number of examples you can think of. The more the better. No more than 15. (50 Seconds)'
    }
    else if (language === 'English'){
        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.

function changeQ (x){
            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)
        }
    }

function recordListAnswer (n){
    if (n > 15){
        return 15
    }
    else if (n < 0){
        return 0
    }
    return n
}

function record0To5Answer (n){
    if (n < 0){
        return 0
    }
    else if (n > 5){
        return 5
    }
    return n
}

function recordAnswers (){
    let ans = document.getElementById('tBox').value
    let instructions = document.getElementById('instructions').innerText
    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:

function roundOff (number,decimalPlaces){
let roundedNumber=number.toFixed(decimalPlaces);
return JSON.parse(roundedNumber)}

let timeLeft = 0
let timerState = 'done'

function clockFormat (){
    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
}

function startCountdown (totalTime){
    timeLeft=totalTime
    timerState='down'
    timerCountdown()
}

function timerCountdown (){
    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'
    }
}

function checkIfTimerRunningOut (){
    if (timeLeft<=5){
    new Audio('timer-running-out.mp3').play()
    }
    if (timeLeft==0){
        new Audio('timer-end.mp3').play()
    }
}


function stopCountdown (){
    timerState='stopped'
    document.getElementById('timer').style.color='white'
}

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 resumeCountdown (){
    timerState='down'
    timerCountdown()
    document.getElementById('timer').style.color='white'
}

function pauseCountdown (){
    timerState='paused'
}

function blinkCompButton (){
    let compButton = document.getElementById('compareResults')
    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)
    }
}

function removeAllExceptSeeResults (){
    nextQAnimation()
    let bodyChildren = document.body.childNodes
    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)

}



// 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.

// showResults()

// 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)
    }
}

function hideTboxVirtualKeyboard (){
    tBox.readOnly = true
    tBox.disabled = true
    tBox.blur()
    tBox.readOnly = false
    tBox.disabled = false
}
// From: https://stackoverflow.com/a/11160055/19515980

function nextQAnimation (){
    hideTboxVirtualKeyboard()
    scroll(0, 0)
    document.body.style.opacity = '0'
    setTimeout(() => {
        document.body.style.opacity = '1'
    }, 200)
}

function newQuizSubject (){
    changeNamePageLanguage()
    document.getElementById('tBox').type = 'text'
    document.getElementById('tBox').value = ''
    document.getElementById('tBox').onkeypress = function (e){
        if (e.key === 'Enter'){
            startQuiz(e)
        }
    }
}

newQuizSubject()

function handleNextQButton (e){
    keyClickedAnimation(gridItems[11])
    if (currentName === '' || currentName === lastName){
        startQuiz(e)
    }
    else{
        nextQ()
    }
}


// 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
}

activateGridEvents()

function deactivateGridEvents (){
    if (gridItems[0].onpointerup === null){
        return false
    }
    for (let i = 0; i < gridItems.length; i++) {
        let x = gridItems[i]
        x.onpointerup = null
    }
}

function keyClickedAnimation (e){
    e.style.color = 'black'
    setTimeout(() => {
//                 e.target.style.fontSize = '200%'
        e.style.color = 'white'
    }, 100)
}

document.getElementById('tBox').addEventListener('keyup', function (e){
        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])
    }
})

function getInformationFromLink (baseLink){
    let fullLink = window.location.href
    let info;
    if (baseLink !== undefined){
        fullLink.slice(baseLink.length).split('&')
    }
    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>