Praktik sederhana pengembangan konten E-Learning yang menggunakan HTML5 sebagai dasar pengembangannya. Pada akhir pengembangan dilakukan penyesuaian konten untuk memenuhi standar SCORM sehingga hasil akhir kontennya adalah sebuah konten yang mendukung standar SCORM dan siap dikonsumsi oleh LMS. Library yang digunakan adalah CreateJS.
7. Membuat lingkaran di canvas
(index.html)
<head>
<meta charset="UTF-8">
<title>Materi Fisika</title>
<link rel="stylesheet" href="style.css"/>
<script src="easeljs-0.7.0.min.js"></script>
<script>
var stage;
function init(){
stage = new createjs.Stage("kanvas1");
var bulat1 = new createjs.Shape();
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);
bulat1.x=370;
bulat1.y=100;
stage.addChild(bulat1);
stage.update();
}
</script>
</head>
8.
9. Membuat 2 lingkaran lagi di canvas
(index.html)
function init(){
stage = new createjs.Stage("kanvas1");
var bulat1 = new createjs.Shape();
var bulat2 = new createjs.Shape();
var bulat3 = new createjs.Shape();
bulat1.graphics.beginFill("#FF0000").drawCircle(0,
0,20);
bulat1.x=370;
bulat1.y=100;
10. Membuat 2 lingkaran lagi di canvas
(index.html)
bulat1.graphics.beginFill("#FF0000").drawCircle(0,0,20);
bulat1.x=370;
bulat1.y=100;
bulat2.graphics.beginFill("#00FF00").drawCircle(0,0,20);
bulat2.x=400;
bulat2.y=100;
bulat3.graphics.beginFill("#0000FF").drawCircle(0,0,20);
bulat3.x=430;
bulat3.y=100;
stage.addChild(bulat1);
stage.addChild(bulat2);
stage.addChild(bulat3);
stage.update();
14. Menambahkan teks di canvas
(index.html)
bulat3.x=430;
bulat3.y=100;
var text = new createjs.Text("Selamat
datang di Pembelajaran Fisika HTML5", "30px
Arial", “#000000");
text.x = 100;
text.y = 250;
stage.addChild(bulat1);
stage.addChild(bulat3);
15. Menambahkan teks di canvas
(index.html)
stage.addChild(text);
stage.addChild(bulat1);
stage.addChild(bulat3);
stage.addChild(bulat2);
16.
17. Menambahkan bayangan pada
teks di canvas (index.html)
text.x = 100;
text.y = 250;
text.shadow = new createjs.Shadow("#000000",
5, 5, 10);
26. Audio + Preloader (index.html)
var stage;
var antrianLoad;
function init(){
stage = new createjs.Stage("kanvas1");
antrianLoad = new createjs.LoadQueue(false);
antrianLoad.installPlugin(createjs.Sound);
antrianLoad.addEventListener("complete", handleComplete);
antrianLoad.loadManifest([{id:"suara1", src:"computermagic.mp3"}]);
}
function handleComplete(event){
var bulat1 = new createjs.Shape();
//dan seterusnya…
stage.addChild(bulat2);
createjs.Sound.play("suara1");
}