Show sourcecode

The following files exists in this folder. Click to view.

Webserver1/Ovningar/Quiz/

account.php
create_quiz.js
create_quiz.php
fetch_table.php
frontpage.php
header.php
login.php
quiz.php
quiz_answer_finished.php
quiz_creation_finished.php
signup.php
style.css

`create_quiz.js`

126 lines UTF-8 Windows (CRLF)

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126


// Stored as questionNr => choices

let options = {

  1: 2 // Number of options in each question

};



// Få knappar att fungera

document.addEventListener("click", (e) => {

  const q = e.target.closest(".create-question");

  if (!q) return;

  const questionNr = Number(

      q.id.slice(1)

    );

  if (e.target.matches(".addChoiceButton")) {

    addChoice(questionNr);

  }

  else if (e.target.matches(".remove-question")) {

    removeQuestion(questionNr)

  }

  else if (e.target.matches(".remove-choice")) {

    removeChoice(e.target)

  }

});



function addChoice(questionNr) {

  if (!(questionNr in options)) return;

  const choiceNr = options[questionNr] + 1;

  const optionHTML = `

  <li class="option">

    <div class="row">

      <label for="question${questionNr}choice${choiceNr}">Alternativ ${choiceNr}:</label>

      <div class="choice-container">

        <input type="text" name="question${questionNr}choice${choiceNr}" id="question${questionNr}choice${choiceNr}" placeholder="Mitt alternativ" required>

        <input type="checkbox" name="question${questionNr}choice${choiceNr}Correct" id="question${questionNr}choice${choiceNr}Correct">

        <label for="question${questionNr}choice${choiceNr}Correct">Rätt?</label>

        <button type="button" class="cross-button remove-choice"><img src="../../Media/ikoner/close_black.svg" alt=""></button>

      </div>

    </div>

  </li>`;

  const questionDiv = document.getElementById(`q${questionNr}`)

  const optionContainer = questionDiv.getElementsByClassName("option-container").item(0)

  optionContainer.insertAdjacentHTML("beforeend", optionHTML)



  options[questionNr]++

}



function removeChoice(button) {

  // Find option element

  const option = button.closest(".option")

  const optionContainer = option.closest(".option-container")

  // Find question number

  const questionElement = optionContainer.closest("[id^='q']"); // Hitta vilken fråga valet tillhör (börjar med q)

  const questionNr = Number(questionElement.id.slice(1))

  if (options[questionNr] <3) {

    alert("En fråga måste ha minst 2 val");

    return;

  }

  option.remove()

  const rows = optionContainer.getElementsByClassName("option") // HTMLCOllention

  

  // Update labels

  for (let i = 0; i < rows.length; i++) {

    const element = rows[i];

    const row = element.firstElementChild;

    const labels = row.getElementsByTagName("label");

    const choiceLabel = labels[0];

    choiceLabel.innerHTML = `Alternativ ${i + 1}:`;

  };



  // Update option dict

  options[questionNr]--

}



function addQuestion() {

  const questionNr = Object.keys(options).length + 1;

  const questionHTML = `

      <div class="create-question" id="q${questionNr}">

        <hr class="force-hr">

        <div class="row">

          <div class="row">

              <button type="button" class="cross-button remove-question">

                <img src="../../Media/ikoner/close_black.svg" alt="">

              </button>

              <label for="question${questionNr}">Fråga ${questionNr}:</label>

            </div>

          <div class="question-create">

            <input type="text" class="quiz-input" name="question${questionNr}" id="question${questionNr}" placeholder="Min roliga fråga" required>

          </div>

        </div>

        <ul class="option-container">

        </ul>

        <button class="addChoiceButton indent" type="button">Lägg till alternativ...</button>

      </div>

  `;

  const quizContainer = document.getElementById("quiz-container");

  quizContainer.insertAdjacentHTML("beforeend", questionHTML);

  const newQuestion = document.getElementById(`q${questionNr}`);



  options[questionNr] = 0;

  addChoice(questionNr);

  addChoice(questionNr);

  newQuestion.scrollIntoView({behavior:"smooth"})

}



async function removeQuestion(questionNr) {

  // Find option element

  const question = document.getElementById(`q${questionNr}`)

  question.previousElementSibling.scrollIntoView({"behavior":"smooth", "block": "center"})

  const quizContainer = document.getElementById("quiz-container")

  question.classList.add("fadeOut")

  await new Promise(resolve => setTimeout(resolve, 500)) // Sleep

   // Remove question

  question.remove()



  const remainingQuestions = quizContainer.getElementsByClassName("create-question")

  // Update labels

  for (let qNr = 1; qNr <= remainingQuestions.length; qNr++) {

    const q = remainingQuestions[qNr - 1];

    q.removeAttribute("id")

    q.id = `q${qNr}`

    const choiceLabel = q.querySelector("label");

    choiceLabel.innerHTML = `Fråga ${qNr}:`;

  };



  // Update option dict

  delete options[Object.keys(options).length] // questions start at 1

}