Psikologi Bravo!

Teknologi membantu kehidupan kita sehari-hari apalagi dengan perkembangan bahasa pemrograman, library, dan framework yang semakin memudahkan bagi siapapun untuk memanfaatkannya, tak terkecuali bagi para psikolog. Kali ini kita akan membuat suatu alat tes yang cukup populer bernama Enneagram. Apa itu Enneagram? Link-link berikut ini mungkin dapat membantu Anda:
<ul>
 	<li><a href="https://www.google.co.id/search?q=apa+itu+enneagram">https://www.google.co.id/search?q=apa+itu+enneagram</a></li>
 	<li><a href="http://www.isigood.com/wawasan/yuk-kenali-kepribadianmu-dengan-mencoba-tes-kepribadian-enneagram-berikut-ini/">http://www.isigood.com/wawasan/yuk-kenali-kepribadianmu-dengan-mencoba-tes-kepribadian-enneagram-berikut-ini/</a></li>
 	<li><a href="http://kotakplus.blogspot.co.id/2013/06/kepribadian-menurut-enneagram.html">http://kotakplus.blogspot.co.id/2013/06/kepribadian-menurut-enneagram.html</a></li>
</ul>
Untuk tutorial kali ini, saya akan membagikan source code dan demo aplikasi yang sudah jadi. Berikut ini adalah linknya:
<ul>
 	<li>demo: <a href="http://muhammadzaini.com/enneagram">http://muhammadzaini.com/enneagram</a></li>
 	<li>source code: <a href="https://github.com/mzaini30/enneagram/tree/gh-pages">https://github.com/mzaini30/enneagram/tree/gh-pages</a></li>
</ul>
Berikut ini adalah screenshot aplikasi:

<img src="https://www.codepolitan.com/uploads/image/source/59/15073386_1346557212034798_8242100504606012632_n.jpg?1479569805972" alt="15073386_1346557212034798_8242100504606012632_n" />

<img src="https://www.codepolitan.com/uploads/image/source/59/15055615_1346557265368126_3558214799392709418_n.jpg?1479569839556" alt="15055615_1346557265368126_3558214799392709418_n" />

<img src="https://www.codepolitan.com/uploads/image/source/59/15032142_1346557292034790_4082710039592770510_n.jpg?1479569864004" alt="15032142_1346557292034790_4082710039592770510_n" />
<h2>Pembahasan Struktur File</h2>
Untuk memudahkan pengorganisasian file, maka saya mengelompokkan file-file tersebut sesuai dengan tipenya. File-file style saya jadikan satu, file-file javascript saya jadikan satu, lalu file-file library, saya jadikan satu dalam folder bin.
<pre>bin
... css
... ... w3.css
... js
... ... jquery.min.js
css
... style.css
gambar
... enneagram.gif
js
... app.js
index.html</pre>
<h2>Persiapan Sebelum Pembahasan Script</h2>
Sebelum membahas script, ada baiknya Anda mengunduh terlebih dahulu repository GitHubnya (<a href="https://github.com/mzaini30/enneagram/tree/gh-pages">https://github.com/mzaini30/enneagram/tree/gh-pages</a>) dan berikut ini beberapa cuplikan script yang akan kita bahas:

Script index.html
<pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta content="width=device-width, initial-scale=1" name="viewport"&gt;
    &lt;title&gt;Tes Kepribadian Enneagram&lt;/title&gt;
    &lt;link rel="stylesheet" href="bin/css/w3.css" /&gt;
    &lt;link rel="stylesheet" href="css/style.css" /&gt;
    &lt;script src="bin/js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/app.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body class="w3-sand"&gt;
    &lt;div class="w3-container w3-red"&gt;
        &lt;h1&gt;Tes Kepribadian Enneagram&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="w3-container soal prolog"&gt;
        &lt;h2&gt;Apa itu &lt;em&gt;enneagram&lt;/em&gt;?&lt;/h2&gt;
        &lt;p class="w3-justify"&gt; Adalah salah satu metode yang bisa digunakan untuk mengetahui kepribadian seseorang. Enneagram diartikan sebagai “sebuah gambar bertitik sembilan”. Metode ini dikabarkan telah ada sejak ratusan tahun yang lalu dan diajarkan secara lisan dalam suatu kelompok sufi di Timur Tengah, hingga akhirnya mulai berkembang di Amerika Serikat sekitar tahun 1960-an. Kepribadian manusia dalam sistem enneagram, terbagi menjadi 9 tipe. Kesembilan tipe kepribadian tersebut adalah :&lt;/p&gt;
        &lt;img src="gambar/enneagram.gif" /&gt;
        &lt;div class="w3-section"&gt;
            &lt;button class="w3-btn-block w3-teal jawab jawab-prolog"&gt;MULAI&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="w3-container soal soal-a1"&gt;
        &lt;p&gt;Apakah yang paling kamu inginkan dari orang lain?&lt;/p&gt;
        &lt;div class="w3-section"&gt;
            &lt;button class="w3-btn-block w3-teal jawab jawab-a"&gt;hormat dan kepatuhan&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="w3-section"&gt;
            &lt;button class="w3-btn-block w3-teal jawab jawab-b"&gt;kasih sayang dan penerimaan&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="w3-section"&gt;
            &lt;button class="w3-btn-block w3-teal jawab jawab-c"&gt;jarak dan privasi&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- beberapa baris script tidak ditampilkan --&gt;

    &lt;div class="w3-container soal soal-b7"&gt;
        &lt;p&gt;Ketika merenungkan kembali tindakan yang sudah dilakukan, gagasan apa yang sering muncul?&lt;/p&gt;
        &lt;div class="w3-section"&gt;
            &lt;button class="w3-btn-block w3-teal jawab jawab-d"&gt;sebenarnya saya mampu melakukannya dengan mudah, tapi ternyata usaha saya berlebihan&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="w3-section"&gt;
            &lt;button class="w3-btn-block w3-teal jawab jawab-e"&gt;sering terpaksa kompromi meski sebenarnya tidak perlu&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="w3-section"&gt;
            &lt;button class="w3-btn-block w3-teal jawab jawab-f"&gt;ternyata masalahnya tidak sesulit yang saya duga&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="w3-container soal hasil-1"&gt;
        &lt;p&gt;Kamu adalah...&lt;/p&gt;
        &lt;h2&gt; Tipe Pembaharu (Reformer / Perfeksionis)&lt;/h2&gt;
        &lt;p&gt;Kekuatan energinya adalah ingin menjadi benar dan bersifat perfeksionis dalam melakukan tugasnya. Mulai dari menyusun perencanaan dan persiapan yang baik sebelum melakukan sesuatu, sangat teliti, hati hati dan ingin tampil sempurna dalam seluruh pekerjaan dan tugas yang dimandatkan kepadanya.&lt;/p&gt;
        &lt;p&gt;Namun biasanya orang dalam tipe ini sering kali menuntut orang lain harus tampil sempurna seperti dirinya, dan cenderung tidak fleksibel dan terlalu dogmatis kepada anak buah. Kelemahannya, sering kali beranggapan bahwa banyak orang yang tidak tahu apa yang harus diperbuat, sehingga menuntut setiap orang berbuat seperti dia.&lt;/p&gt;
    &lt;/div&gt;

    &lt;!-- beberapa baris script tidak ditampilkan --&gt;

&lt;/html&gt;</pre>
Script style.css
<pre>.w3-btn-block {
    overflow: visible;
    white-space: normal;
}

img {
    margin: auto;
    max-width: 100%;
    display: block;
}</pre>
Script app.js
<pre>$(function() {


    pertama = [0, 0, 0]
    kedua = [0, 0, 0]
    tipe = 0


    $(".jawab-a").click(function() {
        pertama[0]++
    })

    // beberapa baris script tidak ditampilkan

    sembunyi = function() {
        $(".soal").hide()
    }


    sembunyi()
    $(".prolog").show()

    $(".jawab-prolog").click(function() {
        sembunyi()
        $(".soal-a1").show()
    })

    $(".soal-a1 .jawab").click(function() {
        sembunyi()
        $(".soal-a2").show()
    })

    // beberapa baris script tidak ditampilkan

    $(".soal-b7 .jawab").click(function() {
        sembunyi()

        largest_pertama = Math.max.apply(Math, pertama)
        posisi_pertama = pertama.indexOf(largest_pertama)

        largest_kedua = Math.max.apply(Math, kedua)
        posisi_kedua = kedua.indexOf(largest_kedua)

        if (posisi_pertama == 0 &amp;&amp; posisi_kedua == 0) {
            $(".hasil-8").show()
        } else if (posisi_pertama == 1 &amp;&amp; posisi_kedua == 0) {
            $(".hasil-3").show()
        }

        // beberapa baris script tidak ditampilkan

    })

})</pre>
Adapun untuk w3 css dan jquery, Anda dapat langsung mengunduhnya dari situsnya
<h2>Pembahasan Script</h2>
Pertama kita akan membahas seperti apa bentuk pertanyaan enneagram ini.

Jadi, ada 14 pertanyaan yang disajikan. Kalau kita melihat pada script index.html, maka kita akan menemukan ada bagian yang diulang-ulang yaitu &lt;div class="w3-container soal ..."&gt;. Nah, class soal menandakan bahwa berbagai element di dalamnya adalah satu aitem atau satu pertanyaan beserta opsi. Pada saat halaman dimuat pertama kali, semua class soal dihidden kecuali class prolog, tampak dari script app.js sebagai berikut:
<pre>sembunyi = function() {
    $(".soal").hide()
}

sembunyi()
$(".prolog").show()</pre>
Lalu, ketika tombol MULAI yang berada di prolog ditekan, maka semua class soal dihidden dan akan dimunculkan class soal-a1, sebagaimana yang ditunjukkan di script app.js:
<pre>$(".jawab-prolog").click(function() {
    sembunyi()
    $(".soal-a1").show()
})</pre>
Lalu, kita mulai pada skoring...

Di awal-awal script app.js, kita mendeklarasikan jawaban a, b, c, sebagai nol dan jawaban d, e, f, sebagai nol (silahkan Anda pelajari tentang cara penghitungan tes kepribadian enneagram), juga . Berikut ini adalah scriptnya (app.js):
<pre>pertama = [0, 0, 0]
kedua = [0, 0, 0]</pre>
Setelah kita mendeklarasikannya, kita pun memberi action pada setiap tombol opsi yang ditekan (a, b, c, d, e, f):
<pre>$(".jawab-a").click(function() {
    pertama[0]++
})

$(".jawab-b").click(function() {
    pertama[1]++
})

$(".jawab-c").click(function() {
    pertama[2]++
})

// beberapa baris script tidak ditampilkan</pre>
dan
<pre>$(".soal-a1 .jawab").click(function() {
    sembunyi()
    $(".soal-a2").show()
})

$(".soal-a2 .jawab").click(function() {
    sembunyi()
    $(".soal-a3").show()
})

$(".soal-a3 .jawab").click(function() {
    sembunyi()
    $(".soal-a4").show()
})

// beberapa baris script tidak ditampilkan</pre>
Setelah kita sampai pada tes yang terakhir, semuanya akan dijumlahkan dan ditentukan tipe kepribadian apa yang diberitahukan oleh tes tersebut:
<pre>largest_pertama = Math.max.apply(Math, pertama)
posisi_pertama = pertama.indexOf(largest_pertama)

largest_kedua = Math.max.apply(Math, kedua)
posisi_kedua = kedua.indexOf(largest_kedua)

if (posisi_pertama == 0 &amp;&amp; posisi_kedua == 0) {
    $(".hasil-8").show()
} else if (posisi_pertama == 1 &amp;&amp; posisi_kedua == 0) {
    $(".hasil-3").show()
} else if (posisi_pertama == 2 &amp;&amp; posisi_kedua == 0) {
    $(".hasil-7").show()
}

// beberapa baris script tidak ditampilkan</pre>
<h2>Kritik dan Saran</h2>
Aplikasi ini tentunya masih memiliki beberapa kekurangan yang kedepannya mungkin akan saya perbaiki atau kita perbaiki bersama melalui kontribusi repository GitHub aplikasi ini (<a href="https://github.com/mzaini30/enneagram/tree/gh-pages">https://github.com/mzaini30/enneagram/tree/gh-pages</a>). Berikut ini adalah beberapa kekurangan sementara yang saya temukan:
<ul>
 	<li>Belum progressive web app sehingga masih membutuhkan internet untuk mengaksesnya.</li>
 	<li>Script masih belum memenuhi kriteria Don't Repeat Yourself (DRY)</li>
 	<li>Setelah menampilkan hasil, tidak tersedia tombol kembali ke beranda sehingga mengharuskan pengunjung untuk mereload halaman jika ingin kembali melakukan pemeriksaan psikologi</li>
</ul>
Tentu masih banyak lagi kekurangan yang terdapat pada aplikasi ini. Anda dapat berkontribusi dengan:
<ul>
 	<li>melalui komentar disqus yang tersedia di bawah tutorial ini</li>
 	<li>melalui issue di repository github: <a href="https://github.com/mzaini30/enneagram/issues">https://github.com/mzaini30/enneagram/issues</a></li>
 	<li>melalui messenger apps maupun sosial media yang tersedia di situs saya: <a href="http://muhammadzaini.com/">http://muhammadzaini.com</a></li>
</ul>
Sekian tutorial dari saya. Ciao...

<div class="margin-md-top" style="background: beige; padding: 6px 20px;">

Tutorial ini ditujukan untuk kompetisi kontes <a href="https://www.codepolitan.com/ikuti-kompetisi-menulis-tutorial-dan-menangkan-hadiah-beasiswa" target="_blank">Menulis Tutorial</a> oleh:

<a href="https://goo.gl/5M61a4?utm_source=codepolitan" target="_blank"><img src="https://wordpress.codepolitan.com/wp-content/uploads/2016/10/logo-hacktiv8.png" width="150" /></a>

</div>

Membuat Tes Kepribadian Enneagram dengan jQuery dan W3.CSS

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Tes Kepribadian Enneagram dengan jQuery dan W3.CSS

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Membuat Blog Statis dengan Bash dan Markdown

Membuat Tes Kepribadian Enneagram dengan jQuery dan W3.CSS

Membuat Quote dengan HTML dan CSS

Belajar Regex dengan Python

Mudahnya Membuat Presentasi dengan Remark JS