Skip to content
This repository has been archived by the owner on Dec 21, 2020. It is now read-only.
/ quiz Public archive

Template Aplikasi Kuis.

Notifications You must be signed in to change notification settings

enix-app/quiz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

EnixApp - Quiz

APLIKASI TIDAK DIKEMBANGKAN LAGI

Cuma template javascript yang dibangun menggunakan VueJS dan framework/library lainnya:

  1. AlaSQL (local storage database)
  2. ShowdownJS (markdown)
  3. Date-FNS
  4. Bootstrap-v4
  5. Bootstrap-Vue
  6. Bootswatch Theme (alternatif Bootstrap tema)
  7. Lodash
  8. Dan lainnya.

Tipe soal yang didukung:

  1. Pilihan Ganda (PG).
  2. Multi Jawaban (MJ).
  3. Benar/Salah (BS).
  4. Isian (IS) untuk jawaban singkat.
  5. Esai (ES) untuk jawaban terperinci.

Penggunaan?

Cuma tautkan file-file assetnya di html dan tambahkan pengaturan seperti di bawah ini:

<html>
  <head>
    <!-- .... -->
    <link href="/quiz/app/quiz.css" rel="stylesheet">
  </head>
  <body>
    <script>
      window.EnixApp = {
        quiz: {
          // ....
        }
      }
    </script>

    <div id="EnixApp-quiz"></div>

    <script src="/quiz/assets/vendor-all.js"></script>
    <script src="/quiz/app/quiz.js"></script>
  </body>
</html>

Skema JSON

{
	"soal_1": {},
	"soal_2": {},
	"soal_3": {},
	"soal_<n>": {}
}

Penomoran di atas wajib berurutan.

Contoh skema dengan Opsi Pilihan

Contoh skema bisa dilihat di direktori assets.

Contoh untuk soal Pilihan Ganda (PG):

{
  "soal_1": {
    "tipe": "pg",
    "body": "Pemain sepakbola yang pernah membela klub Real Madrid di antaranya....",
    "opsi": {
      "column": 2,
      "items": {
        "opsi_1": {
          "body": "Cristiano Ronaldo"
        },
        "opsi_2": {
          "body": "Santiago Solari"
        },
        "opsi_3": {
          "body": "Luis Suarez"
        },
        "opsi_<n>": {
          "body": "..."
        }
      }
    }
  }
}

Untuk opsi_ wajib berurutan.

Minimal opsi jawaban untuk tipe soal Pilihan Ganda (PG) adalah 3 (tiga).

Contoh untuk soal Multi Jawaban (MJ):

{
  "soal_1": {
    "tipe": "mj",
    "body": "Pemain sepakbola yang pernah membela klub Real Madrid di antaranya....",
    "opsi": {
      "column": 2,
      "items": {
        "opsi_1": {
          "body": "Cristiano Ronaldo"
        },
        "opsi_2": {
          "body": "Santiago Solari"
        },
        "opsi_3": {
          "body": "Luis Suarez"
        }
      }
    }
  }
}

Untuk opsi_ wajib berurutan.

Minimal opsi jawaban untuk tipe soal Multi Jawaban (MJ) adalah 3 (tiga).

Contoh untuk soal Benar/Salah (BS):

{
  "tipe": "bs",
  "body": "Pemain sepakbola *Cristiano Ronaldo* pernah membela <em>Manchester United</em>.",
  "opsi": {
    "column": 2
  }
}

Contoh untuk soal Isian (IS) dan Esai (ES):

{
  "soal_4": {
    "tipe": "is",
    "body": "Jumlah Trofi Liga Champions yang dimenangkan Real Madrid saat ini berjumlah....",
  },
  "soal_5": {
    "tipe": "es",
    "body": "Sebutkan 5 pemain yang membela Real Madrid pada musim 2018/2019.",
  }
}

Kolom Opsi Jawaban

Untuk kolom opsi jawaban hanya bernilai 1 atau 2 (number/integer), opsional (default: 1).

{
  "tipe": "pg",
  "body": "Pemain sepakbola *Cristiano Ronaldo* pernah membela <em>Manchester United</em>.",
  "opsi": {
    "column": 2
  }
}

Konfigurasi

  window.EnixApp = {
    quiz: {
      baseUri: "/quiz/",
      source: "/quiz/assets/quiz_data.json",
      duration: 5, // seconds
      interval: 60, // seconds
      onInterval: function(data) {
        // console.log(data)
        // kirim data server setiap 60 detik
        // lihat pengaturan `interval`
        // console.info('Menyimpan data ke server.', new Date())
      },
      onFinish: function(data) {
        // console.warn('Waktu habis!', new Date())
      }
    }
  }

contoh URL untuk pengaturan di atas:

http://example.com/quiz

Demo

enix-app.github.io/quiz

Source

Download aja source code di branch gh-pages ini.

TODO

  1. Tampilan log aktivitas.
  2. Tabel data.
  3. Konfigurasi waktu mulai dengan format 00:00:00.

Releases

No releases published

Packages

No packages published

Languages