public/javascripts/components/statements.js

   1 Vue.component("statements", {
   2     props: ['questions','inputs','showAnswers','index'], // index=-1 : show all, otherwise show current question
   3     // TODO: general render function for nested exercises
   4     // There should be a questions navigator below, or next (visible if display=='all')
   5     // Full questions tree is rendered, but some parts hidden depending on display settings
   6     render(h) {
   7         let domTree = this.questions.map( (q,i) => {
   8             let questionContent = [ ];
   9             questionContent.push(
  10                 h(
  11                     "div",
  12                     {
  13                         "class": {
  14                             wording: true,
  15                         },
  16                         domProps: {
  17                             innerHTML: q.wording,
  18                         },
  19                     }
  20                 )
  21             );
  22             let optionsOrder = _.range(q.options.length);
  23             if (!q.fixed)
  24                 optionsOrder = _.shuffle(optionsOrder);
  25             let optionList = [ ];
  26             optionsOrder.forEach( idx => {
  27                 let option = [ ];
  28                 option.push(
  29                     h(
  30                         "input",
  31                         {
  32                             domProps: {
  33                                 checked: this.inputs.length > 0 && this.inputs[i][idx],
  34                                 disabled: monitoring,
  35                             },
  36                             attrs: {
  37                                 id: this.inputId(i,idx),
  38                                 type: "checkbox",
  39                             },
  40                             on: {
  41                                 change: e => { this.inputs[i][idx] = e.target.checked; },
  42                             },
  43                         },
  44                     )
  45                 );
  46                 option.push(
  47                     h(
  48                         "label",
  49                         {
  50                             domProps: {
  51                                 innerHTML: q.options[idx],
  52                             },
  53                             attrs: {
  54                                 "for": this.inputId(i,idx),
  55                             },
  56                         }
  57                     )
  58                 );
  59                 optionList.push(
  60                     h(
  61                         "div",
  62                         {
  63                             "class": {
  64                                 option: true,
  65                                 choiceCorrect: showAnswers && this.questions[i].answer.includes(idx),
  66                                 choiceWrong: showAnswers && this.inputs[i][idx] && !questions[i].answer.includes(idx),
  67                             },
  68                         },
  69                         option
  70                     )
  71                 );
  72             });
  73             questionContent.push(
  74                 h(
  75                     "div",
  76                     {
  77                         "class": {
  78                             optionList: true,
  79                         },
  80                     },
  81                     optionList
  82                 )
  83             );
  84             return h(
  85                 "div",
  86                 {
  87                     "class": {
  88                         "question": true,
  89                         "hide": index >= 0 && index != i,
  90                     },
  91                 },
  92                 questionContent
  93             );
  94         });
  95         return h(
  96             "div",
  97             {
  98                 attrs: {
  99                     id: "statements",
 100                 },
 101             },
 102             questions
 103         );
 104     },
 105     updated: function() {
 106         // TODO: next line shouldn't be required: questions wordings + answer + options
 107         // are processed earlier; their content should be updated at this time.
 108         statementsLibsRefresh();
 109     },
 110     methods: {
 111         inputId: function(i,j) {
 112             return "q" + i + "_" + "input" + j;
 113         },
 114     },
 115 });