Kajian Artikel Ilmiah - OverCode: Visualizing Variation in Student Solutions to Programming Problems at Scale

OverCode: Visualizing Variation in Student Solutions to Programming Problems at Scale

ELENA L. GLASSMAN, JEREMY SCOTT, and RISHABH SINGH, MIT CSAIL

PHILIP J. GUO, MIT CSAIL and University of Rochester

ROBERT C. MILLER, MIT CSAIL

 http://dx.doi.org/10.1145/2699751

In MOOCs, a single programming exercise may produce thousands of solutions from learners. Understanding solution variation is important for providing appropriate feedback to students at scale. The wide variation among these solutions can be a source of pedagogically valuable examples and can be used to refine the autograder for the exercise by exposing corner cases. We present OverCode, a system for visualizing and exploring thousands of programming solutions. OverCode uses both static and dynamic analysis to cluster similar solutions, and lets teachers further filter and cluster solutions based on different criteria. We evalu-ated OverCode against a nonclustering baseline in a within-subjects study with 24 teaching assistants and found that the OverCode interface allows teachers to more quickly develop a high-level view of students’ understanding and misconceptions, and to provide feedback that is relevant to more students’ solutions.

Reza Fahlevi (G64120003)

Program merupakan serangkaian perintah yang berupa kode yang digunakan oleh sang programmer untuk membuat aplikasi atau untuk menyelesaikan masalah. Setiap program dapat dibentuk melalui berbagai macam bahasa pemograman. Setiap bahasa pemograman memiliki cirri khasnya sendiri dan cirri khas itulah yang menjadi daya tarik tersendiri bagi para programmer. Dalam membuat suatu program biasanya di dasari oleh latar belakang programmer itu sendiri diantaranya logika, pengalaman, serta budaya programmernya sendiri. Untuk itu tidak jarang dijumpai banyak kasus susunan kode program yang berbeda antara satu programmer dengan programmer lain namun memiliki output atau hasil yang sama.

Pada kasus ini penulis membahas tentang sistem yang dapat menvisualisasi dan mengeksploarsi variasi dari ratusan solusi pemogramman yang dapat meng-grade secara otomatis, sistem tersebut dinamakan OverCode. OverCode digunakan bagi lembaga yang memiliki kelas pemogramman dimana banyak para murid yang diharuskan menyelesaikan satu permasalah yang sama. OverCode menggunakan tekhnik novel clustering yang melihat dari kesamaan clean code nya. Cluster tersebut berisi serangkaian dari solusi yang memiliki komputasi sama tetapi variable berbeda atau urutan statement nya yang berbeda. OverCode dapat memberikan sudut pandang baru bagi para pengajar pemogramman bahwa variasi dari kode program itu tak dapat dihindari. Jadi tidak ada solusi mutlak dalam menangani suatu permasalahan dalam dunia pemograman.

Dalam interface aplikasi OverCode terdapat panel yang dinamakan stack pada kolom pertama yang menampung jumlah solusi berbeda dari permasalahan yang sama. Panel berikutnya pada kolom kedua terdapat sintaks yang beda namun memiliki makna sama. Pada kolom ketiga terdapat panel baris dari tiap kode yang sama yang digunakan oleh programmer dengan jumlah frekuensinya. Dalam proses analisisnya OverCode menggunakan tekhnik pipeline, tahapan analisisnya yaitu: Reformat solutions, Execute solutions, Extract variable sequence, Identify common variables, Rename common and unique variables,  dan Make stacks.  

Dengan adanya sistem para guru atau pengajar dapat dengan mudah mengetahui kondisi murid secara keseluruhan apakah murid tersebut paham atau tidak. Jadi pengajar atau guru dapat dengan cepat mengevaluasi hasil kinerja nya, dan mengambil tindak lanjutnya.

Fleksibilitas dan Efisiensi-www.ronoslund.com

Fleksibilitas dan efisiensi adalah bagaimana membuat sebuah sistem yang mengakomodasi pengguna yang sudah ahli dan pengguna yang masih pemula Berikan alternatif untuk pengguna yang berbeda dari pengguna biasa (secara fisik, budaya, bahasa, dan lain-lain).

Inilah bebrapa kesalahan pada situs www,ronoslund.com:

Tidak ada standard dalam menentukan tata letak tampilan

Penyajian tampilan tidak memiliki standard diperuntukan kepada siapa atau kalangan mana. Menurut penilaian saya situs tersebut tidak memiliki sasaran yang jelas untuk target situs tersebut dan bahkan terlihat asal-asalan. Saya sendiri yang tidak begitu paham tentang design tidak sreg dengan design tampilannya, Saran saya sebelum membuat situs harus ditentukan terlebih dahulu target atau sasarannya.

Penentuan background dan warna yang sangat buruk

Silahkan di lirik sebentar gambarnya, itu merupakan salah satu page dari situs tersebut naman page nya coolinks.html. Mungkin seorang pemula saja sudah bisa menilai kurang baik design background nya, background terkesan membuat mata menjadi tidak fokus karena polanya yang berulang dalam jumlah banyak dan kolaborasi warna kuning biru dan silver itu tidak cocok sekali dilihat mata. Saran saya lebih baik menggunakan background yang simple namun nyaman di lihat serta perpaduan warna setiap komponen harus sangat diperhatikan.

Saverity rate: 4 (kesalahan sangat fatal)

Recognition Rather Than Recall-www.ronoslund.com

Recognition Rather Than Recall adalah meminimalkan beban memori pengguna dengan membuat objek, tindakan, dan pilihan terlihat. Pengguna tidak perlu mengingat informasi dari satu bagian dari dialog yang lain. Instruksi untuk penggunaan sistem harus terlihat atau mudah dipahami.
Mari kita langsung mencari kesalahan di situs www.ronoslund.com, tapi pasti agan-agan udah bisa menebak hehe...

User sangat dibebani dengan kurangnya info-penunjuk

Tanpa di ulas mungkin anda sudah jelas merasakan apa yang saya rasakan, "bingung kan?". Yap seratus buat anda, jelas sangat menguras energi dan pikiran ketika menjelajahi situs ini saya pun kewalahan memahami apa isi dan tujuan situs tersebut. Saya sangat kebingungan harus berbuat apa, karena web tersebut lebih mirip poster acak-acakan. Layout sangat buruk gradasi warna tidak sesuai and many more...., kalau terlalu lama mengulas situs yang satu ini bisa-bisa kurus kering kerontang haha. Jujur ini situs banyak sekali kekurangannya sampai saya sendiri bingung apa aja yang harus dibenahi. Supaya user tidak harus berpikir keras untuk memahami situs tersebut seharusnya di berikan sedikit penjelasan situs itu tentang apa, penyusunan layout harus diperbaiki lagi agar user dapat dengan mudah beradaptasi dan memahami.

Tidak ada instruksi yang jelas

Ini lagi aja ya contoh gambarnya

"Adakah petunjuk disan?", Kalau ada yang jawab "ada" saya sarankan untuk segera berobat ke spesialis mata, hehe becanda dikit. Padahal kan ada pepatah "Tak kenal maka tak sayang". Bagaimana bisa user kepincut sama situs tersebut, wong beliau gak nunjukin apa-apa. Di sesi sebelumnya sudah di ulas juga page yang bersngkutan entah itu hanya sekedar gambara atau sebuah laamn yang jelas di home page ada link My Work. Meskipun itu hanya sekedar gambar seharusnya diberi beberapa penjelasan tentang apa gambar tersebut. Mungkin anda bosan dengan saran saya yang terlihat monoton tak ada manuver, tapi mau bagaimana lagi situs tersebut melakukan kesalahan yang sangat fatal untuk menampilkan informasi dalam bentuk web. Jadi saya sarankan untuk coba lebih menggunakan hati dalam mengekspresikan apa yang akan ditampilkan. Atau mungkin coba mengambil mata kuliah interaksi manusia dan komputer aja hehe.

Saverity rate: 4 (Kesalahan sangat fatal)

User Control and Freedom – www.ronoslund.com

User Control and Freedom adalah salah satu Heuristic Evaluation dimana user membutuhkan suatu pengaturan dan kebebasan yang bisa mengubah state suatu sistem menjadi seperti yang mereka inginkan, seperti suatu kontrol untuk membatalkan perintah, kembali seperti semula, atau tetap melanjutkan aktivitas mereka pada sistem. Berikut beberapa kesalahan dari situs www.ronoslund.com:

User tidak dapat mengontrol ketika mengunjungi situs

Supaya tidak bertele-tele langsung aja kita liat gambar situsnya

Itu adalah salah satu page dari situs tersebut, nama page nya adalah mywork.html di page tersebut user tidak dapat berbuat apa-apa karena yang terlihat hanya gambar yang berulang-ulang tanpa ada tools untuk membantu user seperti navigasi atau sejenisnya. Saya jamin jika anda berkunjung ke situs tersebut pasti merasa tidak nyaman. Saran saya ialah situs tersebut dilengkapi dengan alat bantu untuk user dapat mengontrol kegiatannya, seperti navigasi.

User tidak bisa leluasa ketika mengunjungi situs

Oke kita langsung lihat lagi gambar situsnya.... cap cus cin...

Mungkin sekarang saya yang harus bertanya pada anda semua, "Kira-kira bisa berbuat apa kita?", jika kita disuguhkan home page seperti itu. "Mau berbuat apa?", ahh sudahlah beliau memang banyak sekali kekurangannya. Jelas sekali tidak leluasa karena ketidak jelasan situs tersebut. Saran saya sekali lagi mungkin sang pembuat situs harus berkonsultasi dengan para dewa developer website bagaimana cara membuat web yang baik dan benar. Situs tersebut sangat buruk bila dibandingkan dengan apa pun.

Saverity rating: 4 (Kesalahan yang sangat fatal)

Consistency and Standard - www.ronoslund.com

Kita memang sudah sering mendengar dimananpun dan kapanpun bahwa yang namanya konsisten dan standard itu sangat penting dan vital. Dengan konsistensi user akan lebih percaya dan tertarik terhadap situs kita. Dalam situs www.ronoslund.com banyak sekali hal yang tidak konsisten. Berikut beberapa hal tersebut:

Logo yang tidak konsisten

Di halaman awal logo situs seperti word art pada ms word, tapi ketika memasuki page-page selanjutnya ada yang memiliki logo tapi berbeda dengan halaman awal dan ada yang tidak memiliki logo. Hal tersebut jelas sangat membuat user cepat bosan dan kapok unutk mengunjungi situs tersebut. Ini adalah beberapa contoh beberapa page-page situs tersebut:

Halaman solo.html namun link nya berlabel hear

Halaman work.html

Halaman awal situs

Sudah sangat terlihat dengan sangat nyata bahwa logo situs tidak konsisten di setiap page, maka dari itu saya menyarankan untuk dicantumkan nya logo di setiap page. Karena logo merupakan identitas dari sebuah web, logo snagat mudah dikenali oleh user.

Penggunaan font-type yang tidak konsisten

Kayanya gak perlu pake contoh gambar yang lain lagi cukup dengan menggunakan ketiga gambar di atas sudah terhembus bau-bau ketidak konsistenan font-type, jangan kan antar page di dalam satu halaman saja font-type nya sangat berantakan, tidak enak untuk dilihat dan dirasakan. Saya sendiri kebingungan dengan situs tersebut, karena goal dari situs tersebut tidak ada. Bahkan navigasi saja tidak ada.

Untuk itu saya sangat menyarankan untuk menyusun ulang situs tersebut hehehe..., yang pasti penentuan font-type sangat urgent perihal menampilkan objek visual.  

Saverity rating: 4 (Kesalahan sangat fatal)

Visibility of System Status - www.ronoslund.com

Menurut kang Nielsen Visibillity of System Status ialah sistem yang selalu memberikan informasi kepada pengguna apa yang sedang terjadi, melalui pesan dan waktu yang sesuai. Keren... keren... kece parah emang kang Nielsen, oke langsung aja kita ulas kesalahan apa aja yang ada di situs www.ronoslund.com. Berikut beberapa kesalahannya:

Tidak adanya penanda keberadaan dimana posisi user

Pada situs tersebut tidak ada sedikit pun pemberitahuan posisi user, padahal kita tahu penanda tersebut sangat penting untuk user. User akan sangat nyaman dan leluasa untuk menelusuri situs kita dengan adanya penanda keberadaan atau bread crumb. Dengan adanya bread crumb membuat user ngeh posisinya ada dimana atau apa saja yang sudah dilakukan oleh sang user. Pada situs tersebut ketika user masuk home page, user langsung di suguhi oleh tampilan tanpa layout yang baik tanpa adanya bread crumb.

Home page pada situs www.ronoslund.com

Sudah jelas terlihat bahwa di dalam situs tersebut kita tidak tahu sedang berada dimana. Saya sendiri tidak menyadari kalau itu home page. Menurut saya sebaiknya situs tersebut harus di tata ulang hehe. Jelas terlihat lumayan kacau sih, tapi untuk kasus ini sebaiknya diberikan bread crumb agar user ngeh dan sadar pada posisinya.

Tidak ada navigasi

Ini merupakan keslahan paling mendasar menurut saya. Kita tengok gambar di atas halaman situs tidak memiliki navigasi, di lautan saja jika tidak ada navigasi pelaut bisa tersesat bahkan tidak bisa pulang kerumah begitupun di dunia web. User pasti akan bertanya-tanya ketika telah memasuki home page, "Mana kiblat, mana kiblat?" hehe becanda sedikti, jujur saja saya sangat kebingungan ketika pertama kali singgah ke situs tersebut. Saran saya situs tersebut harus di berikan navigasi agar pengunjung tidak kebingungan.

Saverity rate: 4 (kesalahan sangat fatal)

Heuristic Evaluation

Alhamdulillah akhirnya saya dapat nge-blog lagi, pada kesempatan kali ini saya akan mengulas salah satu web di dunia maya berdasarkan Heuristic-Evaluation (Nielsen, 1995a). Web yang beruntung ialah www.ronoslund.com. Kenapa harus beliau? karena menurut saya sangat menarik untuk di ulas biar lebih jelasnya kita langsung aja ke TKP...

Visualisasi Informasi

Pada kesempatan kali ini saya akan mengulas tentang Visualisasi Informasi. Visualisasi Informasi ialah rekayasa dalam pembuatan gambar, diagram atau animasi untuk penampilan suatu Sistem Informasi. Informasi yang akan ditampilkan yaitu tentang penerimaan dari wisatawan mancanegara pada tahun 2009-2012. Informasi tersebut diperoleh dari buku Statistika Indonesia 2014 dan tampilkan dalam bentuk grafik garis dan bar. Dalam melakukan Visualisasi Informasi ini saya menggunakan web aplikasi infogr.am.

Adapun link untuk infogr.am nya ialah:

penerimaan dari wisatawan mancanegara Menurut benua (dalam juta us$) tahun 2009-2013 | Create infographics

Demikian ulasan tentang Visualisasi Informasinya semoga bermanfaat.

Tugas Komdat Prak 7

Oke kali ini saya bakal ngebahas salah satu tools di terminal yaitu nmap. Tools tersebut biasanya digunakan buat memonitoring suatu IP tertentu untuk dicari kelemahannya. Biar cepet ini ada beberapa cara menggunakan nmap, selamat menikmati.

Melakukan Port Scanning pada sebuah host :
root@bufferdie:~# nmap -sS prima.net.id
Starting Nmap 4.76 ( http://nmap.org ) at 2009-06-12 19:03 WIT
Interesting ports on webhost.prima.net.id (202.57.0.19):
Not shown: 984 closed ports
PORT     STATE    SERVICE
1/tcp    open     tcpmux
21/tcp   open     ftp
22/tcp   open     ssh
25/tcp   open     smtp
53/tcp   open     domain
80/tcp   open     http
110/tcp  open     pop3
111/tcp  open     rpcbind
135/tcp  filtered msrpc
143/tcp  open     imap
443/tcp  open     https
445/tcp  filtered microsoft-ds
465/tcp  open     smtps
993/tcp  open     imaps
995/tcp  open     pop3s
3306/tcp open     mysql
Nmap done: 1 IP address (1 host up) scanned in 9.09 seconds

Mengetahui OS yang digunakan pada host target :
root@bufferdie:~# nmap -O nusa.net.id
Starting Nmap 4.76 ( http://nmap.org ) at 2009-06-12 19:21 WIT
Interesting ports on asterix.mdn.nusa.net.id (202.162.192.230):
Not shown: 994 closed ports
PORT     STATE    SERVICE
80/tcp   open     http
135/tcp  filtered msrpc
443/tcp  open     https
445/tcp  filtered microsoft-ds
5222/tcp open     unknown
5269/tcp open     unknown
Device type: general purpose|firewall|router|WAP|specialized|printer
Running (JUST GUESSING) : Linux 2.4.X|2.6.X (91%), Secure Computing Linux 2.4.X (90%), Enterasys embedded (90%), MikroTik RouterOS 3.X (90%), Infoblox NIOS 4.X (90%), Lexmark embedded (89%), SonicWALL embedded (88%)
Aggressive OS guesses: Linux 2.4.22 (Fedora Core 1, x86) (91%), Linux 2.4.31 (Slackware 10.2) (91%), Linux 2.6.11 (Auditor) (91%), Linux 2.6.21 (91%), Linux 2.6.24 – 2.6.25 (91%), Secure Computing SnapGear SG560 firewall (Linux 2.4.31-uc0) (90%), Enterasys Matrix X router (90%), Linux 2.6.9 – 2.6.19 (90%), MikroTik RouterOS software router 3.0beta5 (90%), OpenWrt 7.09 (Linux 2.6.22) (90%)
No exact OS matches for host (test conditions non-ideal).
Network Distance: 7 hops
OS detection performed. Please report any incorrect results at http://nmap.org/submit/ .
Nmap done: 1 IP address (1 host up) scanned in 13.26 seconds

Menggunakan Fin Scan :
root@bufferdie:~# nmap -sF vip.net.id
Starting Nmap 4.76 ( http://nmap.org ) at 2009-06-12 19:40 WIT
All 1000 scanned ports on mail.vip.net.id (202.154.176.9) are closed (965) or open|filtered (35)
Nmap done: 1 IP address (1 host up) scanned in 10.87 seconds

Menggunakan SYN Stealth Scan :
root@bufferdie:~# nmap -PE main.telkomspeedy.com
Starting Nmap 4.76 ( http://nmap.org ) at 2009-06-12 19:45 WIT
Interesting ports on plasa2-acc.plasa.com (125.160.17.26):
Not shown: 997 closed ports
PORT    STATE    SERVICE
80/tcp  open     http
135/tcp filtered msrpc
445/tcp filtered microsoft-ds
Nmap done: 1 IP address (1 host up) scanned in 38.37 seconds
yupz seperti itulah kira-kira beberapa contoh cara penggunaan nmap, jika anda belum puas anda dapat membaca manual nya di nmap[dot][org] ataw dengan menggunakan perintah :
# man nmap
ataw bila anda ingin melihat opsi-opsi yang ada di dalam nmap anda bisa memanggil help nya dengan perintah :
# nmap -h

Sedikit Bersua

Kali ini saya akan mencoba untuk mengomentari user interface dari salah satu situs tutorial pemograman yaitu codecademy.com. Berikut merupakan laman login dari situs tersebut:

Menurut saya tampilannya simpel namun sangat artistik, di bagian header ada logo yang ukurannya sangat pas sehingga membuat ukuran tampilannya proporsional, design content-nya pun sangat nyaman di lihat perpaduan warna yang lembut dibaluti dengan image monitor yang lucu dan form login yang elegan serta background image di sertai logo-logo beberapa bahasa pemograman web membuat siapa saja yang datang akan merasa betah dan sangat memanjakan mata. Pada dasarnya otak manusia akan lebih menerima tampilan yang tidak ricuh (perpaduan warna yang tidak tepat) dan content yang tidak rame. Interface dari laman tersebut menebarkan rasa penasaran yang tinggi kepada pengunjung untuk menelusuri lebih jauh tentang situs tersebut. Selain itu situs tersebut merupakan situs tutorial pemograman yang identik dengan codingan yang bagi sebagian orang sangat mengerikan, dengan bentuk interface yang demikian maka perasaan tersebut malah tergantikan oleh perasaan tertarik yang menggebu. Jadi untuk keseluruhannya saya sangat menyukai interface situs tersebut.

Berikut adalah beberapa blog yang saya komentari mengenai user interface:
http://rachmatarramadhan.blogspot.com/2015/02/user-interface-yang-menarik.html
http://irfanarrofi.blogspot.com/2015/02/user-interface.html
http://joeloww.blogspot.com/2015/02/user-interface-yang-menyebalkan.html