Källkod

Följande filer och mappar finns under mappen webbserverprogrammering.
Mappar visas till vänster och filer till höger. Klicka på en fil eller mapp för att öppna nedan eller visa dess innehåll.

webbserverprogrammering/projects/quiz-extended/js/

1 filer

create_quiz.js

178 lines ASCII 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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178










// REMEMBER THAT ALL NUMBER ADJUSTMENTS SHOULD TAKE INTO ACCOUNT TWO DIGIT-SIZES WHEN STRING HANDLING SUCH AS q10_Txt...











var btnsNewOption = document.querySelectorAll(".btnNewOption");

var btnNewQuestion = document.getElementById("btnNewQuestion");

var btnsRemoveOption = document.querySelectorAll(".btnRemoveOption");

var btnsRemoveQuestion = document.querySelectorAll(".btnRemoveQuestion");



btnsNewOption.forEach((btn) => {

 btn.addEventListener("click", newOption);

});



btnNewQuestion.addEventListener("click", newQuestion);



btnsRemoveOption.forEach((btn) => {

 btn.addEventListener("click", removeOption);

});

btnsRemoveQuestion.forEach((btn) => {

 btn.addEventListener("click", removeQuestion);

});



function newOption() {

 var options = this.parentNode.querySelectorAll(".newOption"); // all siblings with newOption class

 var optionId = (options.length + 1);



 var questionId = this.parentNode.parentNode.dataset.questionId;

 var newOptionElement = createOptionElement(questionId, optionId); // QHICH QUESTIOn



 this.parentNode.insertBefore(newOptionElement, this); // insert new element before clicked button in the DOM

}



function newQuestion() {

 var questions = document.getElementsByClassName("newQuestion");

 var questionId = (questions.length + 1);



 var newQuestionElement = createQuestionElement(questionId);



 this.parentNode.insertBefore(newQuestionElement, this); // insert new element before clicked button in the DOM

}



// removes option and adjusts numbers of subsequent options (eg. 4 -> 3)

function removeOption() {

 var optionElement = this.parentNode;



 var option = optionElement;

 while (option.nextElementSibling.classList.contains("newOption")) {

  option = option.nextElementSibling;



  var newOptionId = option.dataset.optionId - 1;

  option.dataset.optionId = newOptionId;



  option.firstElementChild.firstElementChild.previousSibling.textContent = "Option " + newOptionId;



  var textarea = option.firstElementChild.lastElementChild;

  var radioButton = option.firstElementChild.nextElementSibling;

  

  var textareaNameNoNumber = textarea.name.slice(0, textarea.name.lastIndexOf("_") + 1); // eg. "q2_optText_"

  textarea.name = textareaNameNoNumber + newOptionId;

  radioButton.value--;

 }



 optionElement.parentNode.removeChild(optionElement); // removes the option

}



function removeQuestion() {

 var questionElement = this.parentNode;



 var question = questionElement;

 while (question.nextElementSibling.classList.contains("newQuestion")) {



  question = question.nextElementSibling;



  var newQuestionId = question.dataset.questionId - 1;

  question.dataset.questionId = newQuestionId;



  var label = question.firstElementChild;

  label.firstElementChild.previousSibling.textContent = "Question " + newQuestionId;



  var textarea = label.lastElementChild;

  textarea.name = "qstText_" + newQuestionId;



  var options = question.lastElementChild.querySelectorAll(".newOption");



  setQuestionIdToOptions(newQuestionId, options);

 }



 questionElement.parentNode.removeChild(questionElement); // removes the question in question    haha! :P

}



function setQuestionIdToOptions(questionId, options) {

 options.forEach((option) => {

  var textarea = option.firstElementChild.lastElementChild;

  textarea.name = "q" + questionId + textarea.name.slice(textarea.name.indexOf("_"));



  var radioButton = option.children[1];

  radioButton.name = "q" + questionId + radioButton.name.slice(radioButton.name.indexOf("_"));

 });

}





function createQuestionElement(questionId) {

 var newQuestionDiv = document.createElement("div");

 newQuestionDiv.classList.add("newQuestion");

 newQuestionDiv.setAttribute("data-question-id", questionId);



 var label = document.createElement("label");

 label.innerHTML = "Question " + questionId + "<br>";



 var removeQuestionBtn = document.createElement("div");

 removeQuestionBtn.classList.add("btnRemoveQuestion");

 removeQuestionBtn.addEventListener("click", removeQuestion);



 var textarea = document.createElement("textarea");

 textarea.classList.add("questionText");

 textarea.name = "qstText_" + questionId;



 var newOptionsDiv = document.createElement("div");

 newOptionsDiv.classList.add("newOptions");

 newOptionsDiv.innerHTML = "Mark the <strong>correct</strong> option using the radio buttons.<br><br>";



 var newOptionsBtn = document.createElement("button");

 newOptionsBtn.classList.add("btnNewOption");

 newOptionsBtn.type = "button"; // prevents page reloading on click

 newOptionsBtn.innerHTML = "+ new option";

 newOptionsBtn.addEventListener("click", newOption);



 newOptionsDiv.appendChild(newOptionsBtn);



 newOptionsDiv.insertBefore(createOptionElement(questionId, 1), newOptionsBtn);

 newOptionsDiv.insertBefore(createOptionElement(questionId, 2), newOptionsBtn);



 label.appendChild(textarea);



 newQuestionDiv.appendChild(label);

 newQuestionDiv.appendChild(removeQuestionBtn)

 newQuestionDiv.appendChild(newOptionsDiv);

 return newQuestionDiv;

}



function createOptionElement(questionId, optionId) {

 var newOptionDiv = document.createElement("div");

 newOptionDiv.classList.add("newOption");

 newOptionDiv.setAttribute("data-option-id", optionId);



 var label = document.createElement("label");



 var textarea = document.createElement("textarea");

 textarea.classList.add("optionText");

 textarea.name = "q" + questionId + "_optText_" + optionId;



 var input = document.createElement("input");

 input.type = "radio";

 input.name = "q" + questionId + "_correctOption";

 input.value = optionId;

 input.required = true;

 if (optionId === 1)

  input.checked = true;



 var removeOptionBtn = document.createElement("button");

 removeOptionBtn.classList.add("btnRemoveOption");

 removeOptionBtn.type = "button";

 removeOptionBtn.addEventListener("click", removeOption);



 label.innerHTML = "Option " + optionId + "<br>";

 label.appendChild(textarea);

 newOptionDiv.appendChild(label);

 newOptionDiv.appendChild(input);

 newOptionDiv.appendChild(removeOptionBtn);



 return newOptionDiv;

}