Submission of Group Project

Project Team: Karen Lee Sau Wah, Jaco Cheung Chun Kay

Project Title: Reduced Bearing

Software used: Flash MX

Role and responsibilities:
Karen and I contributed equally in our group project. We worked on different parts of the project. Then we checked each other's work and discussed how to improve as a whole via emails. Finally, we merged the different parts together and got the final version.

Links for the files of this project:
http://iln.cite.hku.hk/com/1374/users/ckcheung5/final_01.fla
http://iln.cite.hku.hk/com/1374/users/ckcheung5/final_01.swf

(For your interest, the answers for the application section are as follows:
Swimming pool: N 39 degrees E
Church: S 62 degrees E
Library: S 50 degrees W

Playground: N 25 degrees W)

Direction is one of the basic techniques of map reading in Form 1 Geography & Integrated Humanities. Students must learn 'compass points', 'whole circle bearing' and 'reduced bearing'. Usually, students know 'compass points' well in their daily life. They can apply 'whole circle bearing' easily. However, it is difficult for them to remember what the reduced bearing is and how it is expressed. Some students measure the direction not only from the north or south, but also from the east or west for reduced bearing. Some even think that the angles can be larger than 90 degrees.

To cope with the above-mentioned misconceptions, our group has designed a learning object to help students learn reduced bearing and make recall easier. According to Daniel (2006), our learning object is classified as a conceptual model.

In traditional teacher-centred approach, students are passively informed of what reduced bearing is and how to express directions in reduced bearing. But in our 'Task' section, students are required to explore how the direction is expressed in reduced bearing on their own by dragging a slider. According to dual coding theory (Clark & Paivio, 1991; Paivio, 1986) and multimedia learning hypothesis (Mayer, 2005), students are expected to simultaneously combine the motion of the pointer X and the reduced bearing of X from O to make a connection between them. To accommodate individual differences, buttons of 'instruction' and 'conclusion' are provided for students to check for hints or conclusion.

In the application section, students are required to choose an item (swimming pool, church, library, or playground). A red line will be drawn and linked from home (O) to the chosen item. Then students are required to observe the angle shown on the protractor, and input the reduced bearing in correct format in the boxes provided. After they have clicked the 'check' button, feedback is provided to direct their further action. As recreational computer games may have a role to play in enhancing cognitive skills and processes that apply in educational situations (Pillay, Brownlee & Wilss, 1999), the gaming feature of this application can foster students' interaction, increase their involvement and lengthen their contact periods with a learning activity (Polonoli, 2000). It is hoped that this simple application can help students consolidate what they have just learnt.

As reduced bearing is a topic in trigonometry in Form 3 Mathematics, this learning object can be reused in Form 3 as well. Students can also use this learning object for concept recall at home. As a learning object which is best described as a technology-based and psychological tool can mediate a learning activity through perception, consciousness and psychological processes (Churchill, 2005), we believe that students can have a deeper impression on how to express reduced bearing and what it is if they can explore it by observation (perception), draw the conclusion themselves (consciousness) and practise more with application (psychological processes).

References:
Clark, J.M. & Paivio, A. (1991). Dual coding theory and education. Education Psychology Review, 3, 149-210.

Churchill, D. (2005). Learning object: an interactive representation and a mediating tool in a learning activity. Educational Media International, 42 (4), 333–349.

Churchill, D. (2006). Towards a useful classification of learning objects. Educational Technology Research and Development.

Ip, K.W., Lam, C.C. &Wong, K.F. (2003). Exploring Geography Book 1A (2nd Edition). Oxford University Press (China) Ltd.

Mayer, R.E. (2005). The Cambridge handbook of multimedia learning. New York, NY: Cambridge University Press

Paivio, A. (1986). Mental representations; A dual-coding Approach. Oxford University Press, Oxford, England.

Pillay, H., Brownlee, J., & Wilss, L. (1999). Cognition and recreational computer games: Implications for educational technology. Journal of Research on Computing in Education, 32(1), 203-217.

Polonoli, Keith E. (2000). What makes educational software educational? Virginia Society of Technology in Education Journal, 15(1), 6-31.

Learning through Blogging

At first, I did not know I could upload video and swf file onto the blogs. But I found that some classmates were able to do so in their blogs. This gave me a motivation to learn how to do so. In fact, I did not ask for classmates' help, but I searched through the Internet to see if there were some postings about uploading video or swf file onto the blogs. Finally, I managed to do so. Even though I did not talk to any classmates face to face, I still could learn something and draw some inspirations from reading their blogs.

By reading classmates' blogs for prototype presentations, I found that some groups had employed hotspot with close buttons. I found that this idea was great as this prevented the hotspot from disappearing if readers accidentally moved the mouse away. Therefore, my group has also included close buttons for the hotspots in the final version.

Here is one more example of learning from peers through blogging. It is interested to learn the mouseover effect in the powerpoint from the raindrop task of Martin and Dorothy's group. This mouseover technique in powerpoint can make the presentation more interesting and appealing. Besides using interactive buttons, the mouseover effect can enhance another kind of interactivity between readers and the visual display. Please click the following link to see my trial on the mouseover effect in powerpoint.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/storyboardwmouseover.ppt

Mathematics and Visual Representation

Being a textbook editor for mathematics, I find that more and more diagrams and visual display of mathematics concepts can be found in mathematics textbooks in Hong Kong while the length of paragraphs is shortened. It seems that textbook editors implicitly agree with Tufte (1983) that visuals can communicate complex ideas with clarity, precision, efficiency and convey the most knowledge in the shortest time in the small space. From my experience, because of the diversity of learner differences in Chinese and English languages, simple and clear annotated visual representation of information can help explain mathematics concepts.

For example, when the method of completing the square is introduced, some students do not understand why the process of completing the square works even after teachers have explained the algebraic proof (e.g. http://students.ou.edu/H/Layla.Hayavi-1/Episode%202.html). Teachers can try to help students visualize the algebraic proof by providing the corresponding geometry proof.

From: http://www-groups.dcs.st-and.ac.uk/~history/Biographies/Al-Khwarizmi.html

An interactive geometric proof can be found at http://illuminations.nctm.org/ActivityDetail.aspx?ID=132. The visualization can help students see the unseen and enhance better understanding (Arcavi, 2003). Teachers can also use this example to let students know that in mathematics, one can sometimes find more than one method to solve a question.

Another example is the visual representation for sum to infinity of geometric series. See the following two GP sum. With these visual representations of proofs without words, students should be able to 'see' what the sum to infinity of geometric series on the left hand side of the equality sign represents.

From: http://www.mathland.idv.tw/


In these examples, diagrams group together all the information necessary for explaining certain mathematics concepts so that students would not be distracted by unnecessary information during learning (Larkin & Simon, 1987). However, how to prepare a good visual representation is really another issue for study.

References:

Arcavi, A. (2003). The role of visual representation in the learning of mathematics. Educational Studies in Mathematics, 52(2003), 215-241.

Lakin, J.H. & Simon H.A. (1987). Why a diagram is (sometimes) worth ten thousand words. Cognitive Science, 11(1987), 65-99.

Tufte, E. R. (1983). The visual display of quantitative information. Cheshire, Connecticut: Graphics Press.

Learning Photostory

In the photostory task, I use the digital photostory to explore a certain mathematical theorem using a mathematical freeware called Wingeom. At the same time, basic skills of using Wingeom are introduced. The reason I choose this topic is that I want to see if it is possible to employ the digital photostory to teach new colleagues how to use some mathematical software.

I have sent my product to some junior colleagues for study. Their feedbacks are positive. An suggestion is that they sometimes feel dizzy as the screens are often zoomed in and out alternatively. I need to note this point in the future even if I want to make the screen as large as possible so that they are clear enough to be seen. I also learn from Martin that there is a freeware called Wink which can make Captivate-like tutorials. Really a good news to me.

Learning Flash

Before enrolled in this module, I was a complete novice for Flash. After this module, I can definitely say that I have learnt some basic skills of using Flash, and am able to prepare simple interactivity using buttons, sliders and hotspots.

At the early stage of planning the group assignment, I held an idea of using (advanced) actionscripts to finish the group project. It was because I found some books about actionscripts in Flash in public library and thought that I could finish the group project without difficulty if I knew how to write actionscripts. But later I found it difficult to learn the required actionscripts in a shorter period of time.

By looking at Daniel's demonstration of moving a pointer using a slider and the tutorial video part 4 about the changing colours of clothes, I changed my mind completely. I started to explore if I could finish the project with simple techniques that I have already learnt in this module. In the former case, I learnt how to include 360 keyframes for the pointer and I could finally easily move the pointer through one revolution with the help of a slider. In the latter case, I learnt how to use the 'tellTarget' action to show the desired reduced bearing. Therefore, I found that 'keeping something simple and smart' could give me some ideas of finding solutions.

With some hands-on experience of using Flash, I know more about the concept of 'layers'. For example, in my trial version on using a slider to drag the pointer to move along a circular path, initially I put the textbox inside the slider layer so that the textbox moved as long the slider moved. The problem was finally fixed as I moved the textbox to an appropriate layer. I really enjoy learning and using Flash now.

Further Improvement of the Prototpye

Besides using a slider to drag the pointer, some other points of improvement of the prototype are listed below.

1) Use a simpler protractor. The size of the protractor should be as large as possible so that users can easily observe the angle.

2) Double check if some lines are straight or not.

3) Delete the line showing the abbreviations for N, S, W & E at the bottom as such information can be introduced by teachers during class.

4) Should let users know where the hotspot areas are.

Session 10 Reflection

After looking at the comments provided by the classmates in my teammate Karen's blog and my blog, I discuss with Karen in this session how to make changes with reference to the comments. The main conclusions are as follows:

1) The message that a slider is better than buttons is found in most of the comments. Karen and I also agree with this. My group has solved the technical problems of using a slider to drag the pointer. I have also posted a slider version on my blog for reference. In this slider version, one can freely drag the pointer to any position on a desired path and the pointer can move faster than in the button version.

2) Karen and I will discuss the possibility of inputting the bearing in the assignment. Technical skills are one big concern. Another concern is how to fine tune my group's learning objectives of using this representation and the structure of the product if users can input the bearings as well.

3) As mentioned in the post titled 'Follow-up on Storyboard' in Daniel's blog, visual and interactive representations are not drill and practice, quiz questions, tests or games, and they are resources too. Therefore, we may not include some questions for students to answer or discuss. In fact, teachers can include these questions in worksheets and distribute to students together with the use of this visual representation.

Slider Version of Reduced Bearing

In this slider version, one can drag a pointer around a circular path and the corresponding reduced bearing is shown.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/Reduced_Bearing_06.swf




In this version, the command 'attachMovie' is no longer used. Instead of creating 8 movie clips, only one movie clip is created to show the reduced bearing in different quadrant.

The idea in fact comes from Daniel's tutorial video part 4 about the changing colours of clothes. When I study this tutorial video again, I find that a movie clip is created with 3 different frames to indicate 3 colours. Then the 'telltarget' action in each button is used to change the colour of the clothes.

Based on this idea, I create a movie clip for the text box showing the reduced bearing with 8 frames. Then the 'telltarget' action is used to prompt the movie clip to jump to a particular frame for different angles.

Using Slider to Drag the Pointer Around - Part II

The following shows another version of using a slider to drag the pointer.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/drag_moving_final3.swf





In this version, I make use of a command 'attachMovie' to show the required reduced bearing. But I have to prepare 8 movie clips for the eight different kinds of bearing. I think there should be a simpler method.

Using Slider to Drag the Pointer Around - Part I

With reference to Ryan's comment on my teammate's blog that users should allow to drag and drop the pointer, I agree that this suggestion can improve my group's presentation. Below is my trial version on using a slider to drag the pointer to move along a circular path.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/moving_slider_final2.swf

I have no problem of showing the correct reduced bearing of the pointer when the slider is dragged. The main problem is that the text box showing the reduced bearing moves when the slider is dragged. Maybe I have wrongly put some objects in an inappropriate layer.

Session 9 Prototype Presentation

Below please find the prototype of the group assignment of Karen Lee Sau Wah and I. By clicking the back and forth buttons, different reducing bearings will then be shown.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/Reduced_Bearing_04.swf

In this version, instead of manipulating four different points as shown in the storyboard, my group decides to manipulate one point first. We finally solve the problem of anchoring the end of the pointer at a desired position. One may find that it is tedious to click the two buttons hundreds of times before one can explore how the reduced bearing is obtained in the four quadrants. That's why my group plans to manipulate four points. But the use of four points only solves part of the problem. My teammate and I are planning and exploring ways to make use of a slider to move the pointer around. If this problem can be solved, more space can be saved and readers can concentrate more on relevant areas in the visual representation. Note that a nicer and simpler protractor will be ready in the final version.

Finally, I am amused to see that only simple actionscripts are involved and similar effects can be achieved.

Session 8 Reflection

In this session, my group was given chance to introduce our new storyboard to the class as my group has decided to change the topic. Thanks for Daniel's help. He has shown my group how to let a point move along a circular path. Before that, I did try hard to study some books about Flash about how to write (advanced) actionscripts. Daniel used simple tweening skill to let a point move around. With this demonstration, I start to think if I can finish the task without too much concern about writing advanced actionscripts. In the following weeks before the assignment deadline comes, my partner and I would continue to try to explore the possibility of doing the same thing with simpler and lower level of skill.

Based on Daniel's file, my group tries to explore ways of finishing the following items with our simple and limited level knowledge of Flash.
(a) Put a protractor in position.
(b) How to find an angle.
(c) How to show the static text and dynamic text at the same time, and decide which layer the text is to be put.
(d) Show the reducing bearing of the point in the four quadrants.

Here is the result of our exploration during these days after session 8.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/moving_with_value5.swf

Note that my group's final product may not look exactly the same as above. In the above file, my group just wants to study and show some skills required for our group assignment. I hope my group can show some more solutions in the coming prototype presentation.

Session 7 Reflection

According to the point 5 in Daniel's blog about Follow-up on Storyboard, I realize that what I am going to present in the group assignment should be more focus and related to one teaching point only. It is one of the four components of only a lesson (task, resources, support and evaluation). It is a resource to be used to support teaching and learning in lessons.

From point 3, I fully understand the purpose of an interactive visual representation is not drill and practice, quiz questions, tests or games. In spite of this, the representations should allow users to interact and explore in order to construct knowledge which is a smaller part of the teaching points of a certain lesson or topic. In school, normally worksheets will be distributed to students and students have to finish the tasks in the worksheets through the exploration of the visual representation. Therefore, I think Science and Mathematics are good subjects that teachers can prepare suitable interactive visual representation based on a specific concept. The software involved are not restricted to Flash or Authorware. In the case of mathematics, apart from some mathematics software, such as Sketchpad, Cabri Geometry, C.a.R., Geogebra, Wingeom, Winplot and Winstats, even Excel and powerpoint are possible tools.

With reference to the points 1 & 2 that a single representation should be kept and displayed on one go on the screen, the content of our group assignment needed to be reconsidered in order to cut the number of screens involved.

In this session, I learnt how to make a slider. Below is the flash file on slider that I created. Up till now, I find the skills of making a slider and placing a mouse pointer over a hotspot area are very useful. With these skills, I can easily create some simple interactive learning objects. The flash tutorial prepared by Daniel is very useful. More importantly, I can refer to them anytime after the session and when necessary. I know I need to practise many times before I can actually manipulate Flash.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/slider1.swf

Revised Storyboard for Reduced Bearing

In order to keep to a single representation displayed on one go on the screen, the storyboard of the new topic reduced bearing is revised at the following link.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/revised_storyboard.ppt

Storyboard for the New Topic

Karen Lee Sau Wah and I would like to change the topic of group assignment to reduced bearing. This is a topic in Form 1 Geography. Some students fail to remember that directions are measured from the north or the south in the reduced bearing, and the reduced bearing should be expressed as Nx°E, Nx°W, Sx°E and Sx°W, where x is greater than 0 but less than 90.

Please find the storyboard of the reduced bearing at the following link.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/reduced_bearing_v2.ppt

A Small Step Ahead

After a search on the internet about how to draw curves/graphs in flash, I find the following web site very useful.
http://www.toxiclab.org/tutorial.asp?ID=94

By referring to the example 4 in the web site, I made a small step ahead that I can draw a quadratic graph on graph paper. Note that the quadratic graph below is y = (x – 2)^2 from x = –1 to x = 5. But there is still a long long way to go.

Change of the Topic for the Group Assignment

Originally, Karen Lee Sau Wah and I would like to prepare a flash learning object which explored the relationship between the graphs of y = f(x) and y = f(x + k), where f(x) is in the form of ax^2 + bx + c. The anticipated challenges are:
1. How to make a slider
2. How to draw the gridlines in flash
3. How to draw the quadratic graph

The first challenge of making a slider is solved as Daniel introduced how to make it in Session 7. For the other two challenges, I need to learn much more about actionscript. And I find that it is not that easy to learn actionscript in a short period of time, as compared to learn the programming in authorware.

I have spent the Easter holiday to make the gridlines as shown below. In fact, I did not write all the actionscript myself. I just copied a sample from a book about flash and made some simplification. I have tried to understand the commands, but failed. And it is much more difficult for me to enrich the content based on the sample.



As a result, my partner and I would like to change the topic of our group assignment, a topic that requires actionscripts that we can handle during this module.

Reflection on Making a Digital Story

I know there are software like Camtasia Studio and Captivate that one can easily record one's screen to create tutorial screen videos and presentations. However, they are not free. And Photostory provides a possible way for me.

Some advantages of Photostory are that it is free and easy to use. I need not use too much time in learning how to manipulate it. One disadvantage is that I need to capture suitable screenshots using digital cameras or by screen capture. I also need to jog down the titles and scripts that I need to include in the videos before I forget. If Camtasia Studio or Captivate is used, I just need to demonstrate as usual, and the actions and voices will be recorded at the same time.

From my view, it is possible to employ photostory to help new colleagues learn some mathematical software. Tutorial videos with subject-based or task-based topics are preferred because different functions or techniques can be applied at the same time. One more important point is that the tutorial videos are reusable.

Storyboard for Group Project

I find that storyboards are a good and useful way of planning and organizing some rough ideas together after brain-storming. Please click the following to see my group's storyboard and feel free to give comment.

http://iln.cite.hku.hk/com/1374/users/ckcheung5/storyboard.ppt

Digital Story for Session 6

Please find my digital story at the following link:
http://iln.cite.hku.hk/com/1374/users/ckcheung5/PhotoStory1_1.wmv

Click the play button to start.