Javascript logic quiz

by Simon Herteby

HTML

<div id="vue">
  <h1>Javascript and/or quiz!</h1>
  <div class="operators">Number of operators: <input v-model.number="operators" type="number"></div>
  <div class="expression">{{expression}}</div>
  <input v-model="answer" @keydown.enter="submit" placeholder="answer and hit enter" class="answer">
  <template v-if="log.length > 0">
    <table>
      <tr>
        <th>Question</th>
        <th>Answer</th>
      </tr>
      <tr v-for="question in log">
        <td class="expression">{{question.expression}}</td>
        <td :class="question.correct ? 'correct' : 'incorrect'">
          {{question.answer}} <span v-if="!question.correct">({{question.evaled}})</span>
        </td>
      </tr>
    </table>
    <div>
      {{log.filter(q => q.correct).length}} / {{log.length}} correct
    </div>
  </template>
</div>

CSS

#vue{
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:16px;
}
h1{
  background:#4fc08d;
  color:white;
  padding:10px;
}
.operators{
  display:flex;
  margin-bottom:10px;
}
.operators input{
  width:30px;
  text-align:center;
}
.expression{
  padding:10px;
  text-align:center;
  font-family:monospace;
  background:#eee;
}
.answer{
  margin-top:10px;
  padding:10px;
  font-size:16px;
  text-align:center;
}
.correct{
  background:#8f8;
}
.incorrect{
  background:#f88;
}
table{
  border-collapse:collapse;
}
td, th{
  padding:10px;
  border:1px solid #eee;
  text-align:center;
}

JavaScript

new Vue({
	el:'#vue',
  data(){
  	return {
    	operators:3,
      expression:'',
      answer:undefined,
      log:[]
    }
  },
  methods:{
    submit(){
    	this.log.unshift({
      	expression:this.expression,
        evaled:eval(this.expression),
        answer:this.answer,
        correct:eval(this.expression) == this.answer
      })
      this.answer = undefined
      this.createQuestion()
    },
    createQuestion(){
    	let expression = ''
      for(let i = 1; i <= this.operators; i++){
      	expression += (Math.random() > 0.5 ? i : 0) + ' '
        expression += (Math.random() > 0.5 ? '&&' : '||') + ' '
      }
      expression += Math.random() > 0.5 ? this.operators + 1 : 0
      this.expression = expression
    }
  },
  created(){
  	this.createQuestion()
  },
  watch:{
  	operators(){
    	this.createQuestion()
    }
  }
})