- components: {
- "statements": {
- props: ['assessment','inputs','student','stage'],
- data: function() {
- return {
- index: 0, //current question index in assessment.indices
- };
- },
- mounted: function() {
- if (assessment.mode != "secure")
- return;
- $("#warning").modal({
- complete: () => {
- this.stage = 2;
- this.resumeAssessment();
- },
- });
- window.addEventListener("blur", () => {
- if (this.stage == 2)
- this.showWarning();
- }, false);
- window.addEventListener("resize", e => {
- if (this.stage == 2 && !checkWindowSize())
- this.showWarning();
- }, false);
- //socket.on("disconnect", () => { }); //TODO: notify monitor (highlight red)
- },
- updated: function() {
- libsRefresh();
- },
- // TODO: general render function for nested exercises
- // TODO: with answer if stage==4 : class "wrong" if ticked AND stage==4 AND received answers
- // class "right" if stage == 4 AND received answers (background-color: red / green)
- // There should be a questions navigator below, or next (visible if display=='all')
- // Full questions tree is rendered, but some parts hidden depending on display settings
- render(h) {
- let self = this;
- let questions = assessment.questions.map( (q,i) => {
- let questionContent = [ ];
- questionContent.push(
- h(
- "div",
- {
- "class": {
- "wording": true,
- },
- domProps: {
- innerHTML: q.wording,
- },
- }
- )
- );
- let optionsOrder = _.range(q.options.length);
- if (!q.fixed)
- optionsOrder = _.shuffle(optionsOrder);
- let optionList = [ ];
- optionsOrder.forEach( idx => {
- let option = [ ];
- option.push(
- h(
- "input",
- {
- domProps: {
- checked: this.inputs[i][idx],
- },
- attrs: {
- id: this.inputId(i,idx),
- type: "checkbox",
- },
- on: {
- change: e => { this.inputs[i][idx] = e.target.checked; },
- },
- },
- )
- );
- option.push(
- h(
- "label",
- {
- domProps: {
- innerHTML: q.options[idx],
- },
- attrs: {
- "for": this.inputId(i,idx),
- },
- }
- )
- );
- optionList.push(
- h(
- "div",
- {
- "class": {
- option: true,
- choiceCorrect: this.stage == 4 && assessment.questions[i].answer.includes(idx),
- choiceWrong: this.stage == 4 && this.inputs[i][idx] && !assessment.questions[i].answer.includes(idx),
- },
- },
- option
- )
- );
- });
- questionContent.push(
- h(
- "div",
- {
- "class": {
- optionList: true,
- },
- },
- optionList
- )
- );
- return h(
- "div",
- {
- "class": {
- "question": true,
- "hide": this.stage == 2 && assessment.display == 'one' && assessment.indices[this.index] != i,
- },
- },
- questionContent
- );
- });
- if (this.stage == 2)
- {
- // TODO: one button per question
- questions.unshift(
- h(
- "button",
- {
- "class": {
- "waves-effect": true,
- "waves-light": true,
- "btn": true,
- },
- on: {
- click: () => this.sendAnswer(assessment.indices[this.index]),
- },
- },
- "Send"
- )
- );
- }
- return h(
- "div",
- {
- attrs: {
- id: "statements",
- },
- },
- questions
- );
- },
- methods: {
- // HELPERS:
- inputId: function(i,j) {
- return "q" + i + "_" + "input" + j;
- },
- showWarning: function(action) {
- this.sendAnswer(assessment.indices[this.index]);
- this.stage = 32; //fictive stage to hide all elements
- $("#warning").modal('open');
- },
- // stage 2
- sendAnswer: function(realIndex) {
- if (this.index == assessment.questions.length - 1)
- this.$emit("gameover");
- else
- this.index++;
- if (assessment.mode == "open")
- return; //only local
- let answerData = {
- aid: assessment._id,
- answer: JSON.stringify({
- index:realIndex.toString(),
- input:this.inputs[realIndex]
- .map( (tf,i) => { return {val:tf,idx:i}; } )
- .filter( item => { return item.val; })
- .map( item => { return item.idx; })
- }),
- number: this.student.number,
- password: this.student.password,
- };
- $.ajax("/send/answer", {
- method: "GET",
- data: answerData,
- dataType: "json",
- success: ret => {
- if (!!ret.errmsg)
- return alert(ret.errmsg);
- //socket.emit(message.newAnswer, answer);
- },
- });
- },
- // stage 2 after blur or resize
- resumeAssessment: function() {
- checkWindowSize();
- },
- },