OnlyConnectWebpage/Game1Round1.js at master · InternetDirigible/OnlyConnectWebpage · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
//Question Constructor Function
function Question(clue1, clue2, clue3, clue4, answer) {
    this.clue1 = clue1;
    this.clue2 = clue2;
    this.clue3 = clue3;
    this.clue4 = clue4;
    this.answer = answer;
}

//Question Construction
const questionAlpha = new Question('Tag: The Power of Paint', 'Chex Quest', 'Portal', "Super 3D Noah's Ark", 'Games with Non Lethal Guns');
const questionBeta = new Question('Tag: The Power of Paint', 'Chex Quest', 'Portal', "Super 3D Noah's Ark", 'Games with Non Lethal Guns');
const questionGamma = new Question('Tag: The Power of Paint', 'Chex Quest', 'Portal', "Super 3D Noah's Ark", 'Games with Non Lethal Guns');
const questionDelta = new Question('Tag: The Power of Paint', 'Chex Quest', 'Portal', "Super 3D Noah's Ark", 'Games with Non Lethal Guns');
const questionEpsilon = new Question('Tag: The Power of Paint', 'Chex Quest', 'Portal', "Super 3D Noah's Ark", 'Games with Non Lethal Guns');
const questionZeta= new Question('Tag: The Power of Paint', 'Chex Quest', 'Portal', "Super 3D Noah's Ark", 'Games with Non Lethal Guns');

//Grabbing all Elements from DOM
const buttonsAll = document.querySelectorAll('button')
const btnAlpha = document.querySelector('#Alpha');
const btnBeta = document.querySelector('#Beta');
const btnGamma = document.querySelector('#Gamma');
const btnDelta = document.querySelector('#Delta');
const btnEpsilon = document.querySelector('#Epsilon');
const btnZeta = document.querySelector('#Zeta');
const clue1Text = document.querySelector('#Clue1');
const clue2Text = document.querySelector('#Clue2');
const clue3Text = document.querySelector('#Clue3');
const clue4Text = document.querySelector('#Clue4');
const answerText = document.querySelector('#Answer');

//Button Functionality Declaration
btnAlpha.addEventListener('click', () => {DisplayQuestion (questionAlpha, btnAlpha)});
btnBeta.addEventListener('click', () => {DisplayQuestion (questionBeta, btnBeta)});
btnGamma.addEventListener('click', () =>  {DisplayQuestion (questionGamma, btnGamma)});
btnDelta.addEventListener('click', () =>  {DisplayQuestion (questionDelta, btnDelta)});
btnEpsilon.addEventListener('click', () =>  {DisplayQuestion (questionEpsilon, btnEpsilon)});
btnZeta.addEventListener('click', () =>  {DisplayQuestion (questionZeta, btnZeta)});

//Button function
function DisplayQuestion(questionCurrent, buttonCurrent){
    for (let button of buttonsAll){
        button.style.visibility = 'hidden';
        }
        buttonCurrent.style.visibility = 'visible';
    if (clue1Text.innerHTML == ''){
        clue1Text.innerHTML = questionCurrent.clue1;
        clue1Text.className = 'Clue';
        }
        else if (clue2Text.innerHTML == ''){
        clue2Text.innerHTML = questionCurrent.clue2;
        clue2Text.className = 'Clue';
        }
        else if (clue3Text.innerHTML == ''){
        clue3Text.innerHTML = questionCurrent.clue3;
        clue3Text.className = 'Clue';
        }
        else if (clue4Text.innerHTML == ''){
        clue4Text.innerHTML = questionCurrent.clue4;
        clue4Text.className = 'Clue';
        }
        else if (answerText.innerHTML == ''){
        answerText.innerHTML = questionCurrent.answer;
        answerText.className = 'AnswerDisplayed';
        }
        else{
        clue1Text.innerHTML = '';
        clue2Text.innerHTML = '';
        clue3Text.innerHTML = '';
        clue4Text.innerHTML = '';
        answerText.innerHTML = '';
        clue1Text.className = 'none';
        clue2Text.className = 'none';
        clue3Text.className = 'none';
        clue4Text.className = 'none';
        answerText.className = 'none';
        for (let button of buttonsAll){
            button.style.visibility = 'visible';
            }
        buttonCurrent.disabled = true;
    }
}