[Mugeda HTML5 technology tutorial 15] Case Study: Creating Mobile Education Courseware

The case to be analyzed in this document is an educational courseware for carbon monoxide reduction of copper oxide. You can use the Mugeda API and use the Mugeda animation to create mobile education courseware. Mugeda provides ideal educational Courseware/micro-courses and Interactive Animation content production solutions for the mobile education and mobile digital publishing fields, flash creators who make relevant content on PCs can use Mugeda to make courseware and digital publications suitable for tablets and smart phones without permission.

 

Courseware content:

Carbon monoxide reduction copper oxide experimental courseware. The first half of the courseware animation is the animation of the installation process of the experimental equipment, and the second half is the interactive part. In this part, students can click the button to complete the experiment, with the alcohol lamp lit 1, ignition alcohol lamp 2, access CO, and then stop the experiment step, there are two alcohol lights off, and turn off CO. This experiment is dangerous and must follow the correct steps. Otherwise, there will be an explosion (alcohol lamp 1 will be ignited before CO access) and carbon monoxide poisoning (alcohol lamp 2 is at risk of CO poisoning after being ignited or turned off before CO is turned off. This courseware simulates the operation process in the form of animation. Before the students perform an actual experiment, the simulation through animation will reduce the possibility of danger due to inspecificity. After the interactive operation, the students determine whether the experiment steps are correct Based on the operation steps. If the encouraging pictures are provided correctly, the error warning is displayed, and the correct experiment operation steps are displayed.

Courseware animation demonstration:

Https://cn.mugeda.com/client/preview_css3.html? Id = 01f00e3a

Design Concept:

Compared with the game, this courseware has a simple logic. It mainly records the order of Button clicks. After the operation is complete, check the recorded operation order to determine whether the result is correct.

Key points:

1. Set segment for button and other component instances

For example:

For (var I = 0; I <3; I ++)

{

Button [I] = scene. getObjectByName ("button" + I );

Button [I]. scene. setSegment ("off", 0, 0, false );

Button [I]. scene. setSegment ("on", 1, 1, false );

Button [I]. scene. playSegment ("off ");

}

2. Judgment result

Click the button and add the corresponding values to the array.

If (buttonStatus [key]! = 1) // determines whether the button has been pressed

{

ButtonStatus [key] = 1;

Order [order. length] = key; // Add this operation to the array

// Corresponding operation, such as setting the effect of the operation

}

The final result is determined in the order of values in the array.

If (order [0] = 2 & order [1] = 0 & order [2] = 1 & order [3] = 1 & order [4] = 0 & order [5] = 2)

{

Success. scene. playSegment ("on"); // if the result is correct, the player is successfully played.

}

Else

{

Help. alpha = 1;

Fail. scene. playSegment ("on"); // otherwise, the playback fails.

}

3. Reset the segment status of the component instance when you start again.

Window. restart = function ()

{

Help. alpha = 0;

Order = [];

ButtonStatus = [0, 0];

CuO. scene. playSegment ("static ");

BlueFire. scene. playSegment ("off ");

Turbid. scene. playSegment ("off ");

Bubble. scene. playSegment ("off ");

Action [0]. scene. playSegment ("off ");

Action [1]. scene. playSegment ("static ");

Action [2]. scene. playSegment ("static ");

For (var I = 0; I <3; I ++)

{

Button [I]. scene. playSegment ("off ");

};

Success. scene. playSegment ("off ");

Fail. scene. playSegment ("off ");

}

Summary: This case analysis focuses on the use of the Mugeda API interface, and experiences the functions and application fields that Mugeda animation can implement. In the next section, we will make a case study: create a cross-screen interactive application.