LAMPIRAN. CAI (Computer Assisted Instruction) adalah suatu sistem penyampaian materi

(1)

L1

LAMPIRAN

1. KUISIONER PENELITIAN

CAI (Computer Assisted Instruction) adalah suatu sistem penyampaian materi pelajaran yang berbasis komputer yang pelajarannya dirancang dan diprogram ke dalam sistem tersebut

1. Usia :

2. Jenis Kelamin : a. Laki-laki b. Perempuan

3. Apakah anda pernah menggunakan CAI(Computer Assisted Instructions) a. Pernah

b. Belum pernah

4. Berapa lama Anda menggunakan perangkat ajar di komputer dalam sekali pemakaian? a. < 1 jam

b. ≧1 - < 2 jam

c. ≧2 - < 3 jam

d. ≧ 3 jam

5. Apakah CAI(Computer Assisted Instructions) mempermudah Anda untuk mengerti suatu materi?

a. Iya b. Tidak

(2)

6. Fitur apa yang Anda inginkan pada CAI? a. Soal latihan

b. Quiz c. Mini games

7. Seberapa penting Antarmuka/Tampilan (interface) untuk suatu software bagi Anda? a. Sangat penting

b. Tidak terlalu penting

8. Tampilan seperti apa yang memudahkan pembelajaran? a. Video

b. Animasi c. Gambar d. Text

e. ___________

9. Menurut Anda materi pemrograman apa yang paling penting? a. Materi dasar (contoh: Algoritma dan pemrograman)

b. Materi menengah (contoh: Struktur data, pemrograman berbasis object) c. Materi lanjutan (contoh: Sistem Operasi, Pemrograman Visual)

10.Bila ada fitur kuis/mini games, apakan Anda ingin menyimpan skor yang telah Anda peroleh?

a. Ya b. Tidak

11.Format manakah yang lebih Anda sukai untuk menggunakan CAI? a. Desktop (diinstall pada PC)

b. Web based

12.Apa harapan anda setelah memakai CAI algoritma dan pemrograman? ___________________________________________________

(3)

2. Kuisioner Evaluasi Web CAI Algorithfun

1. Apakah informasi/materi pada aplikasi Algorithfun sudah lengkap? a. Ya

b. Tidak

2. Apakah informasi/materi pada aplikasi Algorithfun sudah jelas? a. Ya

b. Tidak

3. Apakah fitur di dalam aplikasi Algorithfun ini sudah memenuhi harapan Anda? a. Sudah

b. Belum

4. Apabila Anda mendapatkan matakuliah ini, apakah Anda ingin menggunakan aplikasi ini?

a. Ya b. Tidak

5. Apakah Anda akan merekomendasikan aplikasi ini kepada rekan Anda (khususnya yang mendapatkan matakuliah ini)?

a. Ya , saya akan merekomendasikannya b. Tidak

6. Menurut Anda, apakah aplikasi ini membantu pengguna (khusus nyasiswa/mahasiswa) dalam memperdalam materi tersebut? a. Ya

b. Tidak

7. Bagaimana menurut Anda Interface/tampilan dari aplikasi ini? 1(jelek sekali) – 10(bagus sekali)

(4)

8. Bagaimana menurut Anda kemudahan dalam menggunakan aplikasi ini? 1 (sulit sekali) – 10 (mudah sekali)

9. Selain matakuliah Algoritma, sebutkan 3 matakuliah lain yang baik untuk disediakan dalam bentuk CAI?

……

10.Apakah saran anda untuk pengembangan lanjut aplikasi ini? ……

3. Cara Instalasi Adobe Flash Player

Untuk mengakses website Algorithfun, yang harus di instal adalah Adobe Flash Player, untuk menginstal adobe flash player, unduh melalui website.

Gambar L.1 Halaman download aplikasi

Setelah itu akan muncul pop up untuk menyimpan data instalasi dari adobe flash player, tunggu hingga selesai.

(5)

Gambar L.2 Pop up save file

Setelah selesai di unduh, akan muncul data aplikasi adobe flash player di tempat Anda menyimpan data tersebut, lalu klik data aplikasi tersebut untuk memulai instalasi.

Gambar L.3 Ikon aplikasi Adobe Flash Player

Setelah data aplikasi adobe flash player di klik maka akan muncul kotak instalasi, pada kotak tersebut terdapat pilihan apakah Anda akan mengaktifkan fitur untuk selalu mengupdate adobe flash player tersebut, pilih opsi recommended, lalu klik next.

(6)

Gambar L.4 Kotak pilihan update

Setelah klik next akan muncul kotak dialog progres download, tunggu sampai progress bar terpenuhi, yang berarti proses download telah selesai dan secara otomatis adobe flash player telah terinstal di browser.

(7)

Gambar L.6 Kotak proses download dan instalasi selesai

4. Source code 4.1 Load_materi()

Inisialisasi variabel

function load_gallery(xml_file:String):void{

var xml_loader:URLLoader = new URLLoader(); xml_loader.load( new URLRequest( xml_file ) );

xml_loader.addEventListener(Event.COMPLETE, create_gallery); }

function create_gallery(e:Event):void{ flash_xml = new XML(e.target.data); total_items = flash_xml.item.length(); trace(total_items);

previous_button = flash_xml.config.@previous_button.toString() == "false" ? false : true;

next_button = flash_xml.config.@next_button.toString() == "false" ? false : true;

if( flash_xml.config.@css_file.toString() != "" )

css_file = flash_xml.config.@css_file.toString(); if( flash_xml.config.@tween_duration.toString() != "" )

(8)

tween_duration = parseFloat( flash_xml.config.@tween_duration.toString() ); if( flash_xml.config.@drag_speed.toString() != "" ) drag_speed = flash_xml.config.@drag_speed.toString(); if( flash_xml.config.@submenu_width.toString() != "" ) submenu_width = parseInt( flash_xml.config.@submenu_width.toString() ); if( flash_xml.config.@submenu_height.toString() != "" ) submenu_height = parseInt( flash_xml.config.@submenu_height.toString() ); if( flash_xml.config.@submenu_default_padding.toString() != "" ) submenu_default_padding = parseFloat( flash_xml.config.@submenu_default_padding.toString() ); if( flash_xml.config.@submenu_corner_radius.toString() != "" ) submenu_corner_radius = parseInt( flash_xml.config.@submenu_corner_radius.toString() ); if( flash_xml.config.@submenu_x_gap.toString() != "" ) submenu_x_gap = parseInt( flash_xml.config.@submenu_x_gap.toString( if( flash_xml.config.@submenu_y_gap.toString() != "" ) submenu_y_gap = parseInt( flash_xml.config.@submenu_y_gap.toString() ); if( flash_xml.config.@submenu_default_bgcolor.toString() != "" ) submenu_default_bgcolor = flash_xml.config.@submenu_default_bgcolor.toString(); if( flash_xml.config.@submenu_per_row.toString() != "" ) submenu_per_row = parseInt( flash_xml.config.@submenu_per_row.toString() ); if( flash_xml.config.@content_padding.toString() != "" ) content_padding = parseFloat( flash_xml.config.@content_padding.toString() ); if( flash_xml.config.@content_default_bgcolor.toString() != "" )

(9)

content_default_bgcolor =

flash_xml.config.@content_default_bgcolor.toString();

for( i = 0; i < total_items; i++ ){ item_list.push( { description: flash_xml.item[i].description.toString(), description_bgcolor: flash_xml.item[i].description.@bgcolor.toString(), description_padding: flash_xml.item[i].description.@padding.toString(), content: flash_xml.item[i].content.toString(), content_bgcolor: flash_xml.item[i].content.@bgcolor.toString() } ); } loading_xml.text = ""; loading_xml.visible = false; loading_xml_bg.visible = false; if ( submenu_default_bgcolor.charAt(0) == "#" ) submenu_default_bgcolor = "0x" + submenu_default_bgcolor.slice(1); if ( content_default_bgcolor.charAt(0) == "#" ) content_default_bgcolor = "0x" + content_default_bgcolor.slice(1); if( next_button ){

next_but.x = content_mask.width - next_but.width - content_padding; next_but.y = content_mask.height - next_but.height - content_padding; next_but.addEventListener( MouseEvent.CLICK, on_next_click ); }

if( previous_button ){ if( next_button ){

prev_but.x = next_but.x - prev_but.width - 10; prev_but.y = next_but.y;

(10)

}

else{

prev_but.x = content_mask.width - prev_but.width - content_padding;

prev_but.y = content_mask.height - prev_but.height - content_padding;

}

prev_but.addEventListener( MouseEvent.CLICK, on_previous_click ); }

content_sb.scrollable_area.height = ( content_mask.height - (content_padding << 1) - 40 ) * 0.70;

total_items_height = ( ( submenu_height + submenu_y_gap ) * Math.ceil( total_items / submenu_per_row )) - submenu_y_gap;

css_loader = new URLLoader();

css_loader.load( new URLRequest( css_file ) );

css_loader.addEventListener( Event.COMPLETE, css_complete );

css_loader.addEventListener( IOErrorEvent.IO_ERROR, catch_css_ioerror ); }

function catch_css_ioerror( event:IOErrorEvent ) {loading_xml.text = "Error loading CSS file";}

function css_complete(e:Event):void { flash_style = new StyleSheet();

flash_style.parseCSS( css_loader.data ); load_items();

}

function load_items(): void{ var submenu_bgcolor:uint; var description_padding:uint; var submenu:MovieClip;

(11)

var submenu_box:Shape; var submenu_text:TextField; add_content( true );

for( i = 0; i < total_items; i++ ){

if ( item_list[i].description_bgcolor.charAt(0) == "#" ) submenu_bgcolor = parseInt("0x" +

item_list[i].description_bgcolor.slice(1)); else if( item_list[i].description_bgcolor == "" )

submenu_bgcolor = parseInt( submenu_default_bgcolor ); if( item_list[i].description_padding == "" ) description_padding = submenu_default_padding; else description_padding = parseInt( item_list[i].description_padding );

submenu = new MovieClip(); submenu_box = new Shape();

submenu_box.graphics.beginFill( submenu_bgcolor );

submenu_box.graphics.drawRoundRect( 0, 0, submenu_width, submenu_height, submenu_corner_radius );

submenu_box.graphics.endFill(); submenu.addChild( submenu_box ); submenu_mask = new Shape();

submenu_mask.graphics.beginFill( submenu_bgcolor ); submenu_mask.graphics.drawRect( 0, 0, submenu_width,

submenu_height );

submenu_mask.graphics.endFill(); submenu.addChild( submenu_mask ); submenu_text = new TextField();

submenu_text.autoSize = TextFieldAutoSize.LEFT; submenu_text.multiline = true;

(12)

submenu_text.width = submenu_width - ( description_padding << 1 ) + 2; submenu_text.wordWrap = true; submenu_text.x = description_padding - 2; submenu_text.y = description_padding - 2; submenu_text.styleSheet = flash_style; submenu_text.embedFonts = false; submenu_text.htmlText = item_list[i].description; submenu_text.mouseEnabled = false; submenu.addChild( submenu_text ); submenu_text.mask = submenu_mask;

submenu.x = ( submenu_group.numChildren % submenu_per_row ) * ( submenu_width + submenu_x_gap );

submenu.y = int( submenu_group.numChildren / submenu_per_row ) * ( submenu_height + submenu_y_gap );

submenu.name = "submenu_" + submenu_group.numChildren; submenu.alpha = 0;

Tweener.addTween( submenu, { alpha: 1, delay: i * 0.1, time: tween_duration, transition: "easeOutQuart",

onComplete: add_item_listeners, onCompleteParams: [submenu] });

submenu_group.addChild( submenu ); }

if( submenu_group.height > submenu_group_mask.height ){ submenu_sb.visible = true;

submenu_sb.scrolling("submenu_group", "submenu_group_mask", total_items_height, 0.16);

} }

(13)

{add submenu button function}

function load_content():void{

if( current_item_no >= item_list.length ) current_item_no = 0;

else if( current_item_no < 0 )

current_item_no = item_list.length - 1; content_sb.visible = false;

add_content( false ); }

function add_content( first_time:Boolean ):void{ var content_bgcolor:uint;

if ( item_list[current_item_no].content_bgcolor.charAt(0) == "#" ) content_bgcolor = parseInt("0x" +

item_list[current_item_no].content_bgcolor.slice(1)); else

content_bgcolor = parseInt( content_default_bgcolor );

if( first_time ){

content_bg = new Shape();

content_bg.graphics.beginFill( content_bgcolor ); content_bg.graphics.drawRect( 0, 0, content_mask.width, content_mask.height ); content_bg.graphics.endFill(); content_main.addChild( content_bg );

content_mask.width = content_mask.width - ( content_padding << 1 ); content_mask.height = content_mask.height - ( content_padding << 1 )

- 30 - content_padding;

content_main.addChild( content_mask ); content_number = new TextField();

(14)

content_number.x = content_padding; content_number.background = true; content_number.selectable = false;

content_number_format = new TextFormat(); content_number_format.font = "Verdana"; content_number_format.size = 12; content_number_format.color = 0x444444; content_number_format.leftMargin = 6; content_number_format.rightMargin = 6; content_number_format.leading = 2; content_main.addChild( content_number ); content_main.x = content_mask.x; content_main.y = content_mask.y; content_mask.x = content_padding; content_mask.y = content_padding; this.addChild( content_main ); prev_but.visible = previous_button; next_but.visible = next_button; } else{

var c:ColorTransform = new ColorTransform(); c.color = content_bgcolor; content_bg.transform.colorTransform = c; content_text_mc.removeChild( content_text ); content_main.removeChild( content_text_mc ); }

content_text = new TextField();

content_text.autoSize = TextFieldAutoSize.LEFT; content_text.multiline = true;

content_text.wordWrap = true; content_text.styleSheet = flash_style;

(15)

content_text.htmlText = item_list[ current_item_no ].content; content_text.selectable = true;

content_text_mc = new MovieClip(); content_text_mc.x = content_mask.x; content_text_mc.y = content_mask.y; content_text_mc.visible = false;

content_number.text = "[ " + ( current_item_no + 1 ) + " of " + total_items + " ]";

content_number.setTextFormat( content_number_format ); content_number.y = content_bg.height - content_number.height -

content_padding; content_text_mc.addChild( content_text ); content_main.addChild( content_text_mc ); content_main.addChild( content_sb ); content_main.addChild( next_but ); content_main.addChild( prev_but );

if( content_text_mc.height > content_mask.height ){

content_sb.x = content_mask.x + content_mask.width; content_sb.y = content_mask.y + ( ( content_mask.height - content_sb.height ) >> 1 ); content_text.width = content_mask.width - 15 - content_sb.scrollable_area.width; } else{ content_sb.visible = false; content_text.width = content_mask.width; } content_text_mc.mask = content_mask; setTimeout( attach_scrollbar, 100 ); }

(16)

function attach_scrollbar():void{

content_sb.scrolling("content_text_mc", "content_mask", 0.25); content_text_mc.visible = true;

if( content_text_mc.height > content_mask.height ) content_sb.visible = true; } function on_previous_click(me:MouseEvent):void{ current_item_no--; load_content(); } function on_next_click(me:MouseEvent):void{ current_item_no++; load_content(); } 4.2 Pilih_materi()

var loader:Loader=new Loader(); var mcExternal:MovieClip;

function materi (evt:MouseEvent):int{ gotoAndStop(3); if(evt.target.name == "but_1"){ loader.load(new URLRequest("content1.swf")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfIn); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS , swfLoader); }

else if(evt.target.name == "but_2"){

(17)

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfIn);

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, swfLoader);

}

loader.load(new URLRequest("content3.swf")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfIn); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, swfLoader); }

(18)

else if(evt.target.name == "but_7"){ loader.load(new URLRequest("content7.swf")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfIn); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS , swfLoader); }

loader.load(new URLRequest("content8.swf")); loader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfIn); loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS , swfLoader); } } function swfLoader(swfProg:ProgressEvent){ var persen:Number = Math.round(swfProg.bytesLoaded/swfProg.bytesTotal*100); loading.text=String(persen+"%"); } function swfIn(e:Event):void { loader.x=0; loader.y=96.75; loader.contentLoaderInfo.removeEventListener(Event.COMPLETE,swfIn); mcExternal=loader.content as MovieClip; } 4.3 Game_logic() var xPos:int; var yPos:int; var jumlah:int = 5;

(19)

var startTime:uint = getTimer(); var gameTime:uint = 0;

var timer:Timer = new Timer(1000); var rawScore:uint;

var eScore; var score;

var nameTag:Array = new Array(); var matchSound:Sound = new match(); var notMatchSound:Sound = new notMatch(); var gameScoreField:TextField;

public function easy():void{

addListeners(puzzle items); timer.addEventListener(TimerEvent.TIMER, onTimer); startTime = getTimer(); timer.start(); } function getPosition(target:Object):void{ xPos = target.x; yPos = target.y; } function dragObject(e:MouseEvent):void{ getPosition(e.target); e.target.startDrag(true); } function stopDragObject(e:MouseEvent):void{ if (e.target.hitTestObject(getChildByName(e.target.name + "Target"))){ e.target.x = getChildByName(e.target.name + "Target").x; e.target.y = getChildByName(e.target.name + "Target").y; matchSound.play();

(20)

jumlah--; if(jumlah==0){ timer.stop(); gameTime = getTimer()-startTime; rawScore = scoreTime(gameTime); if(rawScore <=5){ eScore = int((1/rawScore)*100)/100; score = Math.round(eScore*900); gotoAndStop(2); } else if (rawScore <=10){ eScore = int((1/rawScore)*100)/100; score = (eScore*750); gotoAndStop(2); } else{ eScore = int((1/rawScore)*100)/100; score = (eScore*550); gotoAndStop(2); } } } else{ e.target.x = xPos; e.target.y = yPos; notMatchSound.play(); } e.target.stopDrag(); }

function addListeners(... objects):void{

(21)

objects[i].addEventListener(MouseEvent.MOUSE_DOWN, dragObject); objects[i].addEventListener(MouseEvent.MOUSE_UP, stopDragObject); } } function onTimer(event:TimerEvent):void{ gameTime = getTimer()-startTime; timeTxt.text = clockTime(gameTime); } function clockTime(ms:int) {

var seconds:int = Math.floor(ms/1000); var minutes:int = Math.floor(seconds/60); seconds -= minutes*60;

var timeString:String = minutes+":"+String(seconds+100).substr(1,2); return timeString;

}

function scoreTime(ms:int){

var seconds:int = Math.floor(ms/1000); var minutes:int = Math.floor(seconds/60); seconds -= minutes*60;

return seconds;