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.

Another trial on flash

Just a simple trial of using flash. Input two numbers in the first two boxes. Then select the operation on the right.
http://iln.cite.hku.hk/com/1374/users/ckcheung5/calculation.swf

Session 5 Interactive Map

Please click to see my version of interactive map.

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

Proposal for the final assignment

Karen Lee Sau Wah and I would like to prepare a flash learning object which explores 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. As the transformation of the graphs of functions is a new topic in the 1999 Secondary Mathematics which can be found in the coming 334 senior secondary mathematics syllabus, we hope that we can prepare a learning object which can help students to visualize one of the transformation effects (i.e. translation) by changing certain parameter(s), such the values of a, b, c and k.

Difficulties anticipated at this moment:
1. How to make a slider
2. How to draw the gridlines in flash
3. How to draw the quadratic graph

My first Flash file

Please click to see my first Flash of sunrise.

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

Session 4

Technical skills are a key issue. If one is well-versed at different tools or software, one can find the best and most suitable one to do a task in the shortest time. However, good ideas are more important. One can come up with good ideas without any concern for technical skills. Good ideas can still be good ideas no matter which tools or software you employ to present them. Even powerpoint or paper pop-up can serve the purpose.

According to Mayer (2005), people can learn more deeply from words and pictures than from words alone. Although pictures and words are qualitatively different, they can complement each other. If the text and the pictures are designed carefully (taking into considerations of how human minds work and how human processes information, how the dual coding effect on one's learning), people can learn more deeply from words and pictures than from words alone.

As an editor of mathematics textbooks, I notice there are some changes in the number of words and illustrations in textbooks. Old textbooks were mainly printed in black and white, and full of words with fewer illustrations. At present, textbooks are much more colourful, shorter paragraphs with more illustrations in between. As a result, students would not be overwhelmed by wordy and dull text, and they become more comfortable to study illustrations which convey the information and knowledge that they need to learn. Therefore, I agree that students can learn more deeply from words and pictures. Some authors even suggest proofs without words in mathematics. An example can be found at the link http://www.math.hmc.edu/funfacts/ffiles/10001.1-4-8.shtml. This idea is great and students can have a chance to appreciate how mathematics ideas can be expressed without words. It seems that people have been using more illustrations to improve teaching and learning.

Learning from the task of raindrops

As I am not sophisticated with powerpoint, only plane presentation without any interactivity was used in the first two tasks (self introduction and atmosphere). But in the task of raindrops, my partner and I have agreed to try to employ some interactivity in the task. And I also know that there is a function in the powerpoint that can easily allow an object to fall so that we need not make a number of slides to present the same falling effect and this saves us a lot of time.

From the presentation of Ivan's and Theresa's group presentation, I notice that a question can be put at the very beginning to engage readers to interrogate before they can get the answers.

Some classmates have used Flash in this task. Overall speaking, Flash can create more interesting and attractive display. But I do not mean that powerpoint is inferior. Looking at Martin and Dorothy's group and Theresa's group presentation, they have used powepoint and the presentation has included some interactivity and easy to navigate.

One more point learnt from Martin and Dorothy's group is the mouseover effect in the powerpoint. Using this function 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.

With the increase use and popularity of internet, I usually resort to internet to search information for most of the time for its convenience and fast response. Just remind by Daniel, I realize that although there are plenty of resources in the internet, whether the information is correct or not still needs validation. Looking up information in books in library can also be a possible way of checking the correctness. To evaluate web resources, I should compare authority, accuracy, objectivity, currency and coverage, etc. (http://lib.nmsu.edu/instruction/eval.html).

Raindrop

Prepared by Karen Lee Sau Wah and I.



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

Reflection for atmosphere presentation

By comparing Martin and Dorothy's presentation with my group's, I come to the following remarks.



(Presentation from Martin and Dorothy's group at
http://iln.cite.hku.hk/com/1374/users/wclau/Atomsphere.ppt)


1. In their design, most of the text are hidden under mouseover so that the design would not be overloaded with too many text at the first glance to prevent the audience from reading, but necessary information are still provided according to the audience's instruction.

2. They remind me to include 'diagram not to scale' which my group have missed.

3. They used the 'bottom to top' format while my group used the 'right bottom corner to left upper corner' format. As a result, they have more space to present more detailed information than us, e.g. the reflection of heat in the troposphere.

By looking at some of the classmates' design, what I can do to improve in this task is that buttons and animations can be used to bring more fun to the presentations and make the display look more attractive. More importantly, the use of buttons enhances readers to choose and explore at their will in whatever sequence. The messages are shown when clicked on the buttons to help readers to direct from they are looking to focus to the text. As a result, the messages can be easily be addressed to the readers.

Information Visualization

The following are some of the points that attract my attention in the article 'Information Visualization' (Gershon, Eick & Card, 1998).

1. Information visualization enables users to reach decisions in a relatively short time.

Reflection: Visual explanations clearly can articulate the message to be conveyed and eliminate confusion. The result is better understanding, better communication, better decision making, and better results (Woodbury & Kaczmarek, 2003).

2. A picture is worth a thousand words.

Reflection: Effective visual displays allow me to get the information in the shortest time in the small space. They can also help overcome the barriers of different languages and cultures in conveying messages.

3. The disadvantages of using images include difficulty in representing information clearly, dependency of visual and information perception on memories, experiences, beliefs, and culture and difficulty in making effective use of color.

Reflection: As mentioned in previous blogging, proper use of color not only catch attention, but also can enhance legibility and readability.

4. Should understand when images are equivalent to words, when they are more appropriate to represent information than words, and when they are not.

Reflection: As I am not good at design, what I can do is to think more and compare and contrast different visual representation. Just as what has been done in the class, although we are not told any criteria for evaluating visual representation, the class has already summarized a few points in Daniel's blog by critical thinking and comparison, e.g. use of contrast color, bulleted and concise text.

5. People's visual literacy should be increased so that people will become more comfortable dealing with visuals and thus will get more information from them.

Reflection: We not only need information literacy, but also visual literacy that helps:
(i) Develop basic design skills, know when to represent information visually better than words, when to use what tools and when not to use.
(ii) Present information, communicate, collaborate and make decision via visual representation.
(iii) Understand guidelines, strategies and skills for information retrieval and critical evaluation of different visual representation.
(iv) Promote mutual understanding through visual representation among different cultures.
(v) Recognize the social and ethical issues relating to visual representation.

References:
Gershon, N., Eick, S.G., & Card, S. (1998). Information Visualization. Interactions, March, 9-15.

Woodbury, H. & Kaczmarek, P. (2003). Why Your Ideas Need Visual Explanation. Retrieved 7 March 2007 from http://www.dynamicdiagrams.com/all_pdfs/dD_visual_explanation.pdf

Session 3

In this seesion, the first thing I learn is that I have to make sure that the information conveyed is not misleading. As information can be searched via internet, I need to make sure that the information searched via internet in preparing the visual display is valid. To do so, I need to compare authority, accuracy, objectivity, currency and coverage, etc. (Lederer, n.d.; Beck, n.d.) in evaluating different web resources. To ensure the visual display is correct, I may also need to ask some experts (if any) or friends who have the relevant knowledge to double check the content for me.

Secondly, I should be careful of the unintended consequence or message brought forwards by the visual display, e.g. the audience may hold misconceptions after looking at the visual display.

Thirdly, in visual display, I not only convey the knowledge, but also communicate with each other, no matter how complicated or abstract the context is. I need to make sure that my visual explanation does not bring further confusion to the audience, but is accessible to non-technical people as well without obscuring the complex details that are of interest to specialists (Woodbury & Kaczmarek, 2003).

As I have mentioned in my previous blogging that I need to look from a different or new angle, I totally agree with Daniel that we must stop thinking about things that will limit our scope to accept innovation (the 13th comment in Daniel's blog about 'Text to Visual'). Now, one more point I want to add is that besides learning new things in this module, I also need to unlearn in order to open up and try new ways of expressing. Lack of technical skills should not be an excuse of repeating old ways of representation.

References:

Beck, S. E. (n.d.). The Good, the Bad & The Ugly, or, Why It's a Good Idea to Evaluate Web Sources. Retrieved 7 March 2007 from http://lib.nmsu.edu/instruction/eval.html

Lederer, N. (n.d.). How to Evaluate A Web Page. Retrieved 7 March 2007 from http://manta.library.colostate.edu/howto/evalweb2.html

Woodbury, H. & Kaczmarek, P. (2003). Why Your Ideas Need Visual Explanation. Retrieved 7 March 2007 from http://www.dynamicdiagrams.com/all_pdfs/dD_visual_explanation.pdf

Text to Visual

The image shows how a child interprets a given text and presents it visually. Through the activity, how well the child understands the text can be revealed. I just think mind maps employ similar idea of changing text to visual. A mind map is a diagram used to represent words, ideas, tasks or other items linked to and arranged radially around a central key word or idea, and to generate, visualize, structure and classify ideas (from Wikipedia). In the mind map, the teacher can look further into how a student groups the concepts and find out their misconceptions and weaknesses.

A difference between mind map and visual display is that in the former, people are easily guided by connecting lines to interpret the concepts, while in the latter, no specific paths have been provided, and it depends on how the audience perceive.

Reference:
Mind Map from Wikipedia. Retrieved 6 March 2007 from
http://en.wikipedia.org/wiki/Mind_map

Task 1 of Session 2 (Squids)

I choose figure 2 mainly because it use many diagrams for visual comparison of the length, the weight and the habitat, etc. of the squids. This helps save a lot of words. The visual comparison can also impress the audience much more easily within a shorter time.

But after class discussion, there are other points worth to note for an effective visual display:
(1) Appropriate choice of colours to catch attention, e.g. it would be easy to read a text with black colour rather than yellow colour on a white sheet of paper (Gabriel-Petit, 2006).
(2) Short and bulleted points of writings to enhance easy reading.
(3) Choose the audience properly in order to convey the target information.
(4) Choice of graphics, illustrations, photos and artworks consistent with the title. e.g. For figure 4, to match with the word 'live' in the title, more photos are used to let the audience acquire a 'real' experience of reaching squids at a closer distance and give them a surprise.
(5) Effective arrangement of text and visual display so the audience can feel a sense of spatial comfortable in the overall layout and know the logic or sequence they need to follow.

Reference:
Gabriel-Petit, P. (2006). Applying Color Theory to Digital Displays. Retrieved 5 March 2007 from http://www.uxmatters.com/MT/archives/000163.php

Task 2 for Session 2

Prepared by Karen Lee Sau Wah and Jaco Cheung Chun Kay

(1) Summarized the content in a sheet of paper.

(2) Extracted useful information to prepare a pencil draft for our powerpoint.

(3) Prepared the powerpoint based on the pencil draft.

(4) After further discussion, we modified and enriched the content for our final presentation.

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

Session 2

What have I learnt at the end of this session?

I am impressed by the message that visual displays convey the most knowledge in the shortest time in the small space. In visual displays, text is only employed necessarily to facilitate visual explanation. The displays should only contain necessary and the most important information one wants to convey. I should also make clear who the target audience are. I will need to present totally differently if the audience are kids (may need to learn kid speaking) or experts (be more scientific and valid). Words are only employed as a catalyst and should not be overloaded. Otherwise, words will become a punishment to the audience in visual displays.

To make a good visual display, I need to think differently all the times. For example, in task 1, the use of one map in the forth squid figure (instead of two maps in the third squid figure) to present same information can reserve more space for other effective use. For the forth figure again, the use of many photos works closely with the word 'live' in the title to give the audience a great impact of how a giant squid actually looks.

Being an editor of mathematics textbooks for years, I find that there is a great change in the visual display of information in mathematics textbooks. For textbooks in old days, text was predominant with few graphics printed in black and white only. In modern textbooks, less text is employed and visual displays with magnificent colours are increasingly employed in order to attract students' attention and arouse their learning interest. I am looking forward to seeing how this module can stimulate me to reflect and rethink or even reform how I work differently and creatively with the layout in the textbooks! To look from a different or new angle is a kind of creativity and a great challenge to me.

My introduction

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















Does anyone of you like playing chinese chess? Look at the chess game in the slide. Red to move first. Can red win?

Session 1

This is my second time of using blog for learning. Below is the link of the blog for my study in MITE 6301 last summer.

http://jacocck.blogspot.com/

In last year's blog, as I was a complete novice at blogging, mainly text was used. This year, I am eager to know how knowledge or information can be conveyed through interactive visual representations, and learn how to create and deliver visual representations more interactively, efficiently and effectively especially on my company web site, CD Rom products and brochure.