ReadMe - nsidi/myApp GitHub Wiki

Interactive Storybook


This is an interactive storybook for all children but targeted for children with mental health challenges.

Instructions: Viewing the project on desktop

  1. To open the file, double-click on the index.html file and open it on a browser.
  2. You can view the next page or the previous by clicking on the page corners at the bottom

Instructions: How to set up your own interactive storybook

For the purpose of this document, I will only cover the basic of how to get started on setting up a page in the storybook.
  1. Here is the beginning of the code for the cover page of the book. As you can see, I am referencing CreateJS, ZimJS, and the Physics files: Box2D and Physics. I then set up the asset path for the file (i.e. that makes it easier to load all the assets for the file).
  2. <!doctype HTML> <html> <head> <meta charset="utf-8"> <title>Cover</title>

    <script src=""></script> <script>var zon = true; // true for comments from zim code</script> <script src=""></script>

    <!-- physics libraries --> <script src=""></script> <script src="_js/physics_0.1.2.js"></script><!-- helper code for box2D -->


    var frame = new zim.Frame("fit", 1024, 768, "#231F20"); frame.on("ready", function() { zog("ready from ZIM Frame");

    `var stage = frame.stage;`
    `var stageW = frame.width;`
    `var stageH = frame.height;`
    `var assetPath = "_assets/";`
    `frame.loadAssets(["background.png", "rocket.png", "rocket_fire.png", "next.png", "star.png", "starTwo.png", "starThree.png", "star.mp3", "label.mp3", "rocket.mp3"], assetPath);`
    `frame.on("complete", function() {`
  3. I then set up the background and the elements of the physics world (i.e. the frame and borders).
  4. frame.on("complete", function() {
        // Set background to an image
        var background = frame.asset("background.png");
    	// Borders for the world
    	var borders = {x:0, y:0, width:stageW, height:stageH};
    	// New Physics object passing in the ZIM frame and borders
    	var physics = new zim.Physics(frame, borders);
  5. I set up a few physics shapes and determine properties for each shape. The word ‘false’ implies that it is static – meaning, it stays in place and does not move. The top and bottom bar bodies are static to keep the rocketBody in place. The rocketBody’s dynamic property is set to ‘true’ and is thus able to move.
  6. var topBarW = 500; var topBarH = 100;

        var bottomBarW = 900;
        var bottomBarH = 100;        
        //rocket container
        var rocketW = 345;
    	var rocketH = 500;
    	// width, height, dynamic, friction, angular, density, restitution, maskBits, categoryBits, linear
    	var topBarBody = physics.makeRectangle(topBarW, topBarH, false);
        topBarBody.x = 350;
        topBarBody.y = 102;
        topBarBody.rotation = -35;
        var bottomBarBody = physics.makeRectangle(bottomBarW, bottomBarH, false);
        bottomBarBody.x = 688;
        bottomBarBody.y = 430;
        bottomBarBody.rotation = -35;
        var rocketBody = physics.makeRectangle(rocketW, rocketH, true, .2);
        rocketBody.x = 280;
        rocketBody.y = 480;
        rocketBody.rotation = 35;
  7. In order to add shape properties to the physics elements, we add shape properties to it using ZimJS and then add it to the physics map. This means that whatever shapes we made above in the physics, we can add shapes inside those Physics elements. Once that is complete, we can add functions to it. For example, in the rocket.on function, we can choose to have it do multiple things.
  8. var topBar = new zim.Rectangle(topBarW, topBarH, "white"); topBar.centerReg(stage); topBar.alpha=0; topBar.cursor = "pointer";

        var bottomBar = new zim.Rectangle(bottomBarW, bottomBarH, "white");
        bottomBar.cursor = "pointer";
        var rocket = frame.asset("rocket.png");
        rocket.cursor = "pointer";
        rocket.on ("click", function() {
⚠️ ** Fallback** ⚠️