Quiz

<template>
  <div class="o">
      <div class="slide">
        <div v-if="side===0">
            <div class="feladat">
                Szoftverfejlesztés órai feladat
                <br><hr>
                <p class="cim">Matek és magyar kvíz</p>
                <br><br><hr>
                <br>
                <br>
            </div>
            <p>2020. március 30.</p>
            <img class="btn" src="./assets/kezdés.png" @click="side++" />
        </div>

        <div v-else-if="side===1">
            <div class="menu">Főmenü</div>
            <div class="feladat">
                <table>
                  <tr>
                    <td>
                      <img @click="side=3,p=[],opsz=0" class="menu" src="./assets/t1.png" title="matek" />
                    </td>
                    <td>
                      <img @click="side=11,p=[],opsz=0" class="menu" src="./assets/t2.png" title="magyar" />
                    </td>
                  </tr>
                  <tr>
                    <td class="mm">
                      matek
                    </td>
                    <td class="mm">
                      magyar
                    </td>
                  </tr>
                </table>
            </div>
        </div>

        <div v-else-if="side===3">
            <div class="feladat">
                Mekkora a területe az alábbi téglalapnak?
                <br>
                <hr>
                <img class="rajz" src="./assets/kv01.png" />
            </div>
            <div>
                <input type="number" v-model.number="i1" @keyup.enter="check(50)" />
                <button @click="check(50)">Megad</button>
                <button @click="i1=2,check(1)">Passz</button>
            </div>
        </div>

        <div v-else-if="side===4">
            <div class="feladat">
                Mekkora a területe az alábbi háromszögnek?
                <br>
                <hr>
                <img class="rajz" src="./assets/kv02.png" />
            </div>
            <div>
                <input type="number" v-model.number="i1" @keyup.enter="check(25)" />
                <button @click="check(25)">Megad</button>
                <button @click="i1=2,check(1)">Passz</button>
            </div>
        </div>

        <div v-else-if="side===5">
            <div class="feladat">
                Mekkora a kerülete az alábbi téglalapnak?
                <br>
                <hr>
                <img class="rajz" src="./assets/kv01.png" />
            </div>
            <div>
                <input type="number" v-model.number="i1" @keyup.enter="check(30)" />
                <button @click="check(30)">Megad</button>
                <button @click="i1=2,check(1)">Passz</button>
            </div>
        </div>

        <div v-else-if="side===6">
            <div class="feladat">
                A hajó és a kapitány együtt 70 éves.<br>
                Hány éves a kapitány, ha hajó kétszer annyi idős most, mint a kapitány volt akkor, amikor a hajó annyi idős volt, mint most a kapitány?
            </div>
            <div>
                <input type="number" v-model.number="i1" @keyup.enter="check(30)" />
                <button @click="check(30)">Megad</button>
                <button @click="i1=2,check(1)">Passz</button>
            </div>
        </div>

        <div v-else-if="side===7">
            <div class="feladat">
                Milyen testet ábrázol az arábbi ábra?
                <br>
                <hr>
                <br><br>
                <img class="rajz" src="./assets/kv03.png" />
            </div>
            <div>
                <table>
                    <td class="o">
                        <button @click="rossz">hasáb</button>
                    </td>
                    <td class="o">
                        <button @click="jo">körkúp</button>
                    </td>
                    <td class="o">
                        <button @click="rossz">csonka kúp</button>
                    </td>
                </table>
            </div>
        </div>

        <div v-else-if="side===11">
            <div class="feladat">
                Melyik van helyesen közszói előtaggal írva?
                <br>
                <hr>
                <img class="rajz" src="./assets/kv11.png" />
            </div>
            <div>
                <table>
                    <td class="o">
                        <button @click="jo">Mogyorósi-szikla</button>
                    </td>
                    <td class="o">
                        <button @click="rossz">mogyorósi-szikla</button>
                    </td>
                    <td class="o">
                        <button @click="rossz">Mogyorósi szikla</button>
                    </td>
                    <td class="o">
                        <button @click="rossz">mogyorósi szikla</button>
                    </td>
                </table>
            </div>
        </div>

        <div v-else-if="side===12">
            <div class="feladat">
                Melyik van tulajdonnévi előtaggal írva?
                <br>
                <hr>
                <img class="rajz" src="./assets/kv12.jpg" />
            </div>
            <div>
                <table>
                    <td class="o">
                        <button @click="rossz">Fekete tenger</button>
                    </td>
                    <td class="o">
                        <button @click="rossz">Kis-kőszkla</button>
                    </td>
                    <td class="o">
                        <button @click="rossz">Holdvilág-árok</button>
                    </td>
                    <td class="o">
                        <button @click="jo">Kaszpi-tenger</button>
                    </td>
                </table>
            </div>
        </div>

        <div v-else-if="side===13">
            <div class="feladat">
                Melyik van helytelenül írva?
                <br>
                <hr>
                <img class="rajz" src="./assets/kv13.jpg" />
            </div>
            <div>
                <table>
                    <td class="o">
                        <button @click="rossz">Szent Anna-tó</button>
                    </td>
                    <td class="o">
                        <button @click="jo">Vas Mihály hegy</button>
                    </td>
                    <td class="o">
                        <button @click="rossz">Magas-Tátra</button>
                    </td>
                    <td class="o">
                        <button @click="rossz">Csepel-sziget-</button>
                    </td>
                </table>
            </div>
        </div>

        <div v-else>
            <div class="feladat">
                <p class="cim">A kvíz eredménye {{ (100 * opsz / p.length).toFixed() }} %</p>
                <hr>
                <ul style="text-align:left;">
                  <li v-for="(v, i) in p" :key="i" v-html="(i+1) + '. feladat: ' + xv( i, v )" />
                </ul>
                <button @click="side=1">Vissza a menüre</button>
            </div>
            <div>
              <br>
              <br>
              Köszönöm az 5-öst!
            </div>
        </div>

      </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            side: 0,
            p: [],
            i1: null,
            opsz: 0
        }
    },
    methods: {
        check(v) {
          if (this.i1) {
            if (this.i1==v) this.jo()
            else this.rossz()
            this.i1=null
          }
        },
        jo() {
          this.p.push(1)
          this.side++
          this.opsz++
        },
        rossz() {
          this.p.push(0)
          this.side++
        },
        xv(i, v) {
          if (v) return `<span class="jo">helyes válasz</span>`
          else return `<span class="nemjo">hibás válasz</span>`
        }
    }
}
</script>

<style>
    @import url('https://fonts.googleapis.com/css?family=Sen&display=swap');
    div.menu {
      font-weight: bold;
        font-size: 40px;
        margin: 10px auto;
        padding: 20px;
        box-shadow: 1px 3px 3px black ;
        border-radius: 20px;
        background-color: #19696f;
        color: rgb(192, 225, 213);
        text-shadow: 1px 1px 4px white;
    }
    img.btn {
      width: 200px;
      box-shadow: 1px 3px 3px black ;
      border-radius: 20px;
    }
    img.rajz {
      width: 400px;
      box-shadow: 1px 3px 3px black ;
      border-radius: 20px;
    }
    img.menu {
      cursor: pointer;
      width: 300px;
      height: 180px;
      box-shadow: 1px 3px 3px black ;
      border-radius: 20px;
    }
    img.nyil {
      width: 100px;
      box-shadow: 1px 3px 3px black ;
      border-radius: 20px;
    }
    div.o {
      text-align: center;
    }
    input {
      margin: 30px;
      padding: 6px;
      font-size: 20px;
      text-align: right;
    }
    div.feladat {
        font-size: 30px;
        text-align: center;
        vertical-align: middle;
        height: 400px;
        margin: 10px auto;
        padding: 20px;
        box-shadow: 1px 3px 3px black ;
        border-radius: 20px;
        background-color: #e5e8cd;
        padding-top: 40px;
    }
    div.slide {
        font-family: 'Sen', sans-serif;
        width: 800px;
        height:600px;
        margin: 30px auto;
        padding: 20px;
        box-shadow: 1px 3px 3px black ;
        border-radius: 20px;
        background-color: #afd3c8;
    }
    button {
        font-family: 'Sen', sans-serif;
        height: 60px;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 5px;
        padding-bottom: 5px;
        box-shadow: 1px 3px 3px black ;
        border-radius: 20px;
        font-size: 18px;
        cursor: pointer;
    }
    table {
        width: 100%;
        height:100%;
    }
    td.o {
        padding-top: 40px;
        text-align: center;
    }
    td.mm {
      vertical-align: top;
      color: #803231;
      text-shadow: 1px 1px 3px black;
    }
    span.jo {
        color: #427450;
    }
    span.nemjo {
        color: #803231;
    }
    p.cim {
        font-size: 40px;
        color: #803231;
        text-shadow: 1px 1px 3px black;
    }
</style>