Učitelj funkcija 2000

index.html

<div id="app" v-cloak>
  <div class="container">
    <h1>
      MAT1 pitalica
      <small v-if="answered > 0">({{ correct }}/{{ answered }})</small>
    </h1>
    <p>Kviz se sastoji od pitanja iz funkcija koje trebate znati. Tipovi pitanja su: odaberi domenu, odaberi sliku, odaberi nultočke.</p>
    <question :question="currentQuestion" :solve="solve"></question>
    <button class="btn" v-if="tried" @click="next">Idemo dalje</button>
    <div v-if="failed">
      <img src="http://storage7.static.itmages.com/i/15/1126/h_1448562762_2728717_22131fb446.jpeg" alt="" />
    </div>
    <hr />
    <small>Kome se dalo ovo raditi? Mihovilu Ilakovcu i Florijanu Galiću.</small>
  </div>
</div>
<script id="question" type="html/text">
  <div class="question">
    <h2>{{ question.question }}</h2>
  <div class="options">
    <div class="option" v-for="option in question.options" @click="solve(option)" :class="{'correct': option.correct && option.tried, 'false': !option.correct && option.tried }"><span v-html="option.text"></span></div>
  </div>
  </div>
</script>

script.js

Vue.component('question', {
  template: document.getElementById("question").innerHTML,
  props: {
    question: {
      required: true
    },
    solve: {
      required: true
    }
  }
});
var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      functions: [{
        name: "Konstanta",
        domain: "R",
        image: "c",
        zeros: "Nema ih osim kada je c = 0"
      }, {
        name: "pravca",
        domain: "R",
        image: "R, ako a != 0",
        zeros: "-b/a"
      }, {
        name: "Kvadratna",
        domain: "R",
        image: "[(4ac-b^2)/4*a, +&infin;\>, a \> 0, \<-&infin;, (4ac-b^2)/4*a]",
        zeros: "x12=(-b&plusmn;sqrt(b^2-4*a*c))/2a"
      }, {
        name: "Kubna",
        domain: "R",
        image: "R",
        zeros: "x=0"
      }, {
        name: "Polinom n-tog stupnja",
        domain: "R",
        image: "R",
        zeros: "Ne pise nista u malom Ivici"
      }, {
        name: "drugog korijena",
        domain: "[0, +&infin;\>",
        image: "[0, +&infin;\>",
        zeros: "x=0"
      }, {
        name: "treceg korijena",
        domain: "R",
        image: "R",
        zeros: "x=0"
      }, {
        name: "Eksponencijalna",
        domain: "R",
        image: "\<0, +&infin;\>",
        zeros: "Nema"
      }, {
        name: "Logaritamska",
        domain: "\<0, +&infin;\>",
        image: "R",
        zeros: "x=1"
      }, {
        name: "Sinus",
        domain: "R",
        image: "[-1, 1]",
        zeros: "k*&pi;"
      }, {
        name: "Kosinus",
        domain: "R",
        image: "[-1, 1]",
        zeros: "&pi;/2 + k*&pi;"
      }, {
        name: "Tangens",
        domain: "Unija \<-&pi;/2+k*&pi;, &pi;/2+k*&pi;\>",
        image: "R",
        zeros: "k*&pi;"
      }, {
        name: "Kotanges",
        domain: "Unija \< k*&pi;, &pi;+k*&pi;\>",
        image: "R",
        zeros: "&pi;/2+k*&pi;"
      }, {
        name: "Arkus sinus",
        domain: "[-1, 1]",
        image: "[-&pi;/2, &pi;/2]",
        zeros: "x=0"
      }, {
        name: "Arkus kosinus",
        domain: "[-1, 1]",
        image: "[0, &pi;]",
        zeros: "x=1"
      }, {
        name: "Arkus tangens",
        domain: "R",
        image: "\<-&pi;/2, &pi;/2\>",
        zeros: "x=0"
      }, {
        name: "Arkus kotangens",
        domain: "R",
        image: "\<0, &pi;\>",
        zeros: "Nema"
      }, {
        name: "Sinus hiperbolicki",
        domain: "R",
        image: "R",
        zeros: "x=0"
      }, {
        name: "Kosinus hiperbolicki",
        domain: "R",
        image: "[1, +&infin;\>",
        zeros: "Nema"
      }, {
        name: "Tangens hiperbolicki",
        domain: "R",
        image: "\<-1, 1\>",
        zeros: "x=0"
      }, {
        name: "Kotangens hiperbolicki",
        domain: "R \\ {0}",
        image: "\<-&infin;, -1\> unija \<1, +&infin;\>",
        zeros: "Nema"
      }, {
        name: "Area sinus",
        domain: "R",
        image: "R",
        zeros: "x=0"
      }, {
        name: "Area kosinus",
        domain: "[1, +&infin;\>",
        image: "[0, +&infin;\>",
        zeros: "x=1"
      }, {
        name: "Area tangens",
        domain: "\<-1, 1\>",
        image: "R",
        zeros: "x=0"
      }, {
        name: "Area kotangens",
        domain: "\<-&infin;, -1\> unija \<1, +&infin;\>",
        image: "R \\ {0}",
        zeros: "Nema"
      }],
      domains: [],
      images: [],
      zeros: [],
      currentQuestion: {},
      failed: false,
      answered: 0,
      correct: 0
    };
  },
  computed: {
     tried: function() {
      var tried = false;      this.currentQuestion.options.forEach(function(option) {
        tried = tried || option.tried;
      });
      return tried;
    }
  },
  methods: {
    next: function() {
      var currentQuestion = {
        question: '',
        options: []
      }
      var f = this.functions[_.random(0, this.functions.length - 1)];
      var question_type = ([["domain", "domains", "Koja je domena"], ["image", "images", "Koja je slika"], ["zeros", "zeros", "Koje su nultočke"]])[_.random(0, 2)];
      currentQuestion.question = question_type[2] + " funkcije " + f.name.toLowerCase() + "?";
      currentQuestion.options.push({
        text: f[question_type[0]],
        correct: true,
        tried: false
      });
      var pool = _.shuffle(this[question_type[1]].filter(function (value) {
        return value !== f[question_type[0]];
      }));
      for (var i = 0; i < 3; i++)
        currentQuestion.options.push({
          text: pool[i],
          correct: false,
          tried: false
        });
      currentQuestion.options = _.shuffle(currentQuestion.options);
      this.currentQuestion = currentQuestion;
      this.failed =  false;
    },
    solve: function(option) {
      if (!this.tried) {
        option.tried = true;
        this.answered += 1;
      } else {
        return;
      }
      if (!option.correct) {
        this.currentQuestion.options.forEach(function (option) {
          if (option.correct) option.tried = true;
        });
        this.failed = true;
      } else {
        this.correct += 1;
      }
    }
  },
  ready: function () {
    this.domains = _.unique(this.functions.map(function (f) {
      return f.domain;
    }));
    this.images = _.unique(this.functions.map(function (f) {
      return f.image;
    }));
    this.zeros = _.unique(this.functions.map(function (f) {
      return f.zeros;
    }));
    this.next();
  }  
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.8/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>

style.css

.question {
  .options {
    .option {
      padding: 5px;
      margin: 5px 0;
      background: #FFF;
      border: 2px solid #CCC;
      cursor: pointer;
      &.false {
        background: #e74c3c;
      }
      &.correct {
        background: #28b362;
      }
      &.false, &.correct {
        color: #FFF;
      }
    }
  }
}
[v-cloak] {
  display: none;
}
img {
  max-width: 100%;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />

Učitelj funkcija 2000.markdown

Učitelj funkcija 2000

A Pen by Mihovil Ilakovac on CodePen.

License.