Breadcrumbs

 

 

 

Download ModelDownload SourceembedLaunch Website ES WebEJS

Translations

Code Language Translator Run

Credits

This email address is being protected from spambots. You need JavaScript enabled to view it.; Fu-Kwun Hwang; Felix J. Garcia-Clemente; Francisco (Paco) Esquembre

Briefing Document: Telling Time JavaScript HTML5 Applet Simulation Model

1. Overview:

This document reviews an online interactive simulation tool designed to teach children how to tell time using an analog clock. It is an open educational resource (OER) created by Open Source Physics @ Singapore and is built using JavaScript and HTML5, making it accessible across various devices. The primary goal of this applet is to help young learners (ages 6-9) grasp the concept of time telling on an analog clock.

2. Key Themes and Ideas:

  • Interactive Learning: The applet is designed for interactive learning, allowing children to manipulate the clock hands. The simulation allows users to drag the clock hands to different positions.
  • Visual Clarity: The simulation uses color-coded hands: the hour hand is blue, the minute hand is magenta (or pink), and the second hand (which is hidden by default) is red. This visual aid enhances understanding, especially for younger learners.
  • Teaching Mode vs. Real Clock Mode: The applet has a “teaching mode” which emphasizes the actual hour, even when the minute hand is close to the next hour. This mode helps children understand that, for example, 6:55 is indeed 6 hours and 55 minutes and not 7:55. The “non-teaching mode” shows the clock as it appears on most real clocks.
  • Addressing Learning Difficulties: The tool addresses common difficulties students face, such as misinterpreting the hour hand's position when it is approaching the next hour. The documentation specifically mentions a common issue that children might move the hands to say 2:10 and think that it is 2 o'clock.
  • Use of Hints: The tool includes "hints 'words show'," designed to teach phrases like "half past hour" to reinforce the logic of the English language as related to time.
  • Versatile Accessibility: The simulation is accessible on various devices, including computers, tablets, and smartphones, making it suitable for diverse learning environments. It is specifically mentioned that it works well on Android/iOS, including phones/tablets/iPads as well as Chromebook laptops.
  • Customizable: The simulation can be paused for user input, allowing selection of show/hide options and enabling customization of the learning experience via a drop-down menu.
  • Emphasis on Observation: Users are encouraged to pay attention to the different hand movements as well as their position on the clock face.

3. Important Facts and Quotes:

  • Target Audience: "The teaching simulation starts running immediately showing the real world time. The seconds (RED) hand is hidden by default to make the view simple for children age 6 to 9 years old."
  • Teaching Mode Rationale: "The teaching mode is created to help children realize 6H55M is actually 6H55M and not 7H55M as the hour hand really points very closely to 7 for example."
  • Common Student Error: "some children may drag to 2H10M position on the clock face, thinking that it is 2H, so you need to watch out for that and address that learning difficulty."
  • Interactive Elements: "The interactive elements are shown as cross-hair circles on the hour, minute and second hands that automatically compute the respective positions."
  • Languages: The resource has translations available, although the languages are not specified.
  • Credits: The tool is credited to Fu-Kwun Hwang, Felix J. Garcia-Clemente, and Francisco (Paco) Esquembre.
  • Embeddable: The tool can be embedded in a webpage using an iframe.

4. Related Resources:

The page provides an extensive list of other resources, including:

  • Links to mirror sites and app store downloads of the clock applet.
  • Links to other online clock resources, including interactive games and tutorials.
  • Links to many other simulation tools on the same site covering various topics from math, physics, and chemistry.
  • Links to resources on modelling and simulation.
  • Links to awards and recognition of the creators.

5. Usage Notes

  • The document recommends that teachers observe the children using the app so that they can address specific difficulties they might have.
  • The simulation works best when paused for user inputs.
  • The app is intended for educational use and the developers welcome feedback for further improvements.

6. Conclusion:

The "Telling Time JavaScript HTML5 Applet Simulation Model" is a valuable open educational resource for teaching children how to tell time on an analog clock. It's interactive, visually clear, and addresses common learning difficulties with a user-friendly interface that emphasizes the relationship between time, the movement of the hands, and their position on the clock face.

 

Telling Time Simulation Study Guide

Quiz

Instructions: Answer the following questions in 2-3 sentences each.

  1. What is the primary function of the Telling Time JavaScript HTML5 Applet Simulation Model described in the text?
  2. What are the color representations for the hands in the simulation, and what time unit does each represent?
  3. How does the teaching mode of the simulation differ from the non-teaching mode?
  4. According to the text, what is one common misconception that children might have when learning to tell time using an analog clock?
  5. What do the cross-hair circles on the hour, minute, and second hands signify in the simulation?
  6. Where can users find the interactive elements to select show/hide properties within the simulation?
  7. What is the purpose of the "hints 'words show'" feature in the simulation?
  8. Who are the individuals credited with developing the simulation?
  9. Name three different platforms or devices where the simulation can be used.
  10. Name two other types of interactive simulations that are hosted on this site and are listed in the text.

Quiz Answer Key

  1. The primary function of the simulation is to provide an interactive and visual way for children to learn how to tell time using an analog clock face. It allows users to manipulate the clock hands and observe the relationship between the hour, minute, and second hands.
  2. The hour hand is represented in blue, the minute hand in magenta (or pink), and the second hand in red. These color codings allow users to clearly distinguish between the different time units on the clock face.
  3. The teaching mode of the simulation is designed to help children understand the correct time representation even when the hour hand is closer to the next hour. The non-teaching mode shows the clock hands in a way that mirrors most real analog clocks.
  4. One common misconception that children might have is that when the hour hand is close to the next hour, the time should be read as that hour (e.g., thinking 6:55 is 7:55). The simulation addresses this by emphasizing that it is still 6:55.
  5. The cross-hair circles signify the interactive elements that automatically compute the respective positions of the hands on the clock face, allowing users to manipulate the hands and adjust the time.
  6. Users can find interactive elements by accessing the drop-down menu within the simulation; this is where the various show/hide properties of the clock hands can be selected.
  7. The purpose of the "hints 'words show'" feature is to help children understand the logic of English language expressions related to time, such as "half past hour."
  8. The simulation is credited to Fu-Kwun Hwang, Felix J. Garcia-Clemente, and Francisco (Paco) Esquembre.
  9. The simulation can be used on Android/iOS devices (including phones, tablets, and iPads), and ChromeBook laptops.
  10. Two other interactive simulations hosted on this site and mentioned in the text are "Block Sliding On An Incline Plane with Accelerometer JavaScript HTML5 Applet Simulation Model" and "Primary Maths 3D view of Objects Cone, Pyramid, Cylinder, Sphere on Cuboid JavaScript Model Simulation Applet HTML5."

Essay Questions

Instructions: Answer each of the following questions in a well-structured essay, demonstrating a comprehensive understanding of the source material.

  1. Discuss the pedagogical design of the Telling Time Simulation, focusing on how its interactive features and modes support the learning process for young children learning to tell time.
  2. Analyze the importance of visual representations in educational simulations, using the Telling Time Simulation as an example of how color and visual design choices enhance understanding.
  3. Evaluate the role of technology in mathematics education, drawing on the Telling Time Simulation and similar resources mentioned in the text to support your arguments.
  4. Describe the collaborative nature of creating educational resources as exemplified by the team of developers listed for the Telling Time Simulation. How might this type of collaboration impact the effectiveness of the learning tool?
  5. Compare and contrast the effectiveness of interactive learning tools, like the simulation described here, versus more traditional methods of teaching time-telling concepts. Include specific examples of other similar interactive learning resources referenced in the source material.

Glossary of Key Terms

  • Analog Clock: A clock with hands that move around a circular dial to indicate the time.
  • HTML5 Applet: A small application or program embedded in a webpage, using HTML5 for enhanced interactivity.
  • JavaScript: A programming language primarily used to create interactive effects within web browsers.
  • Simulation Model: A computer program that attempts to represent a real-world process or system, in this case telling time, for educational purposes.
  • Teaching Mode: In the context of the simulation, the mode of operation where the simulation is specifically designed to aid teaching and correct common misconceptions.
  • Interactive Elements: Features of a program or application that allows a user to actively engage and make choices.
  • Open Educational Resources (OER): Teaching, learning, and research materials that are freely available for anyone to use and adapt, such as this simulation and its supporting documentation.
  • Drop-down Menu: A list of options from which a user can select within a computer interface.
  • Subtended: (in the context of geometry) The arc is subtended by an angle at the center of a circle.
  • Subtended Angle: An angle whose vertex is on the circle, and whose sides pass through the endpoints of the arc.

Apps

mirror http://iwant2study.org/lookangejss/math/ejss_model_clockgeogebrawee/clockgeogebrawee_Simulation.xhtml

Get it on Google Play Cover arthttps://play.google.com/store/apps/details?id=com.ionicframework.clockapp502881

https://itunes.apple.com/us/app/clock-interactive-for-kids/id1183636157?ls=1&mt=8

Sample Learning Goals

[text]

For Teachers

Introduction
The teaching simulation starts running immediately showing the real world time. The seconds (RED) hand is hidden by default to make the view simple for children age 6 to 9 years old. The view is simple with just the hour ( BLUE) and minute (MAGENTA or easier to call it PINK?) hands. The interactive elements are shown as cross-hair circles on the hour, minute and second hands that automatically compute the respective positions.
The teaching mode is created to help children realize 6H55M is actually 6H55M and not 7H55M as the hour hand really points very closely to 7 for example.
The non teaching mode is also available which shows the analog display in most real clocks.
The simulation works best and need to be paused for user inputs via the drop-down menu to select various show/hide properties
The hints 'words show' is also designed to help children realized the logic of the English language such as 'half past hour'.
some children may drag to 2H10M position on the clock face, thinking that it is 2H, so you need to watch out for that and address that learning difficulty.
Reset the simulation will put it back to its original set.
Enjoy!
Rate the app and share what you think will help children learn. I will try to add new features if time permits :)

Research

[text]

Video

 Version:

  1. https://weelookang.blogspot.com/2021/03/telling-time-javascript-html5-applet.html
  2. http://www.phy.ntnu.edu.tw/ntnujava/index.php?topic=990.0 by Fu-Kwun Hwang orginal Java applet

Other Resources

  1. http://www.wmnet.org.uk/files/clock.swf
  2. http://resources.woodlands-junior.kent.sch.uk/maths/measures.htm
  3. https://www.geogebra.org/material/show/id/329 nice idea of using time as the unique identifier that help me think how to program this
  4. https://www.mathsisfun.com/time-clocks-analog-digital.html nice interactive clock
  5. https://mathsframe.co.uk/en/resources/resource/116/telling-the-time game 
  6. https://apps.mathlearningcenter.org/math-clock/ drawing tool for clock
  7. https://www.education.com/game/stop-the-clock/ game to tell time to 5 mins

Frequently Asked Questions About the Telling Time JavaScript HTML5 Applet Simulation Model

  1. What is the purpose of the Telling Time JavaScript HTML5 Applet Simulation Model? This simulation is designed as an interactive educational tool to help children, particularly those aged 6 to 9, learn how to tell time on an analog clock. It aims to address common difficulties children encounter, such as misinterpreting the hour hand's position as it approaches the next hour. It also provides support for understanding time-related language such as "half past." The simulation offers both a teaching and a non-teaching mode.
  2. What are the key features of the teaching mode? The teaching mode focuses on clarity and ease of understanding. It uses color-coded hands (blue for hours, magenta for minutes, and red for seconds, though the second hand is hidden by default) and interactive cross-hair circles to highlight each hand's position. The teaching mode is specifically designed to help children distinguish, for example, 6:55 from 7:55 by demonstrating the precise position of the hour hand before it moves to the next hour.
  3. What is the non-teaching mode? The non-teaching mode displays the clock in the way most real analog clocks appear, offering a more traditional view. This allows for a comparison and contrast of the simplified teaching mode and a more realistic simulation, supporting gradual learning.
  4. How can users interact with the simulation? The simulation features interactive elements displayed as cross-hair circles on the hour, minute, and second hands that automatically compute their respective positions. Users can also use a drop-down menu to select various show/hide properties and make adjustments such as showing hints to explain how to read time (e.g. "half past hour"). The simulation can be paused to allow user interaction and to select properties.
  5. What common learning difficulties does this app try to address? One key issue the simulation addresses is the tendency for some children to misinterpret time on a clock as the hour hand moves towards the next hour, for example by misreading 2:10 as simply '2 o'clock' The interactive nature of the app helps in showing the correct positions of both the hour and minute hands. The hints such as "half past hour" are also implemented in the app to address the logic of the English language in reading time.
  6. On what devices can this app be used? The simulation is a JavaScript HTML5 applet, making it accessible on a variety of platforms including Android and iOS devices (such as phones, tablets, iPads), and ChromeBook laptops. It can be embedded into webpages using an iframe, meaning it is versatile and easily integrated into online learning environments.
  7. Is this a free resource and what licenses apply? Yes, the resource is free for educational use, and it is licensed under a Creative Commons Attribution-Share Alike 4.0 Singapore License. However, if you would like to commercially use EasyJavaScriptSimulations Library, you will have to read the separate license found at https://www.um.es/fem/EjsWiki/Main/EJSLicense and contact This email address is being protected from spambots. You need JavaScript enabled to view it. directly.
  8. Are there other educational simulations available from the same source? Yes, the provided source contains links to a very broad variety of simulations on various educational topics in science and mathematics including electromagnetism, mechanics, and astronomy. They are all HTML5 applets and many include interactive and visual elements to enhance learning. Examples of other simulations include models of inclines, projectile motion, and simple harmonic motion.
3.75 1 1 1 1 1 1 1 1 1 1 Rating 3.75 (4 Votes)