Articles

PhET: Fraction Matcher - Mathematics


PhET: Fraction Matcher - Mathematics

Fraction Matcher

Mathematics is often labeled as an abstract science. This is because numbers don&rsquot actually exist as objects, but are rather concepts that we have attribute to objects. You won&rsquot find 7 anywhere in the Universe, but you will find seven planets, seven cats, seven molecules of hydrogen, seven wonders, and so on.

While this concept of numbers can be easily understood by most children, fractions is where arithmetic gets a bit more complicated. Teachers could consider making the process easier by using a program called Fraction Matcher.

An easy-to-use educational app

Even though it is a program that contains tests, Fraction Matcher can also be considered a good teaching tool. No matter their difficulty level, all the tests involve matching fractions with corresponding geometric patterns. That&rsquos actually a good way to explain the concept even though fractions have many applications in real life, when you have to give a simple example, the usual topics that come to mind are cooking and shopping discounts.

Unlike other apps developed by PhET Interactive Simulations, Fraction Matcher looks a bit lifeless, but this can&rsquot really be regarded as a downside, considering the topic. You will get a standard smiley face each time you make a correct match, and every test you complete will be celebrated with fraction-confetti, but that&rsquos as far as the animation gets in this program.

Tests and more tests

There are two categories of tests: Matching Game &ndash which is exactly what its name suggests &ndash and Mixed Numbers &ndash which is identical to the first, nit whole numbers are also added to the mix. There are eight levels of difficulty for each category, and you will be awarded a maximum number of three stars upon completing a level, depending on how many mistakes you made.

While Fraction Matcher is nothing mind-blowing, it can still be considered a pleasant and moderately-challenging test application that can help pupils understand a basic arithmetic concept.


Online Games at PrimaryGames.com

Description: Match shapes and numbers to earn stars in this fractions game. Challenge yourself on any level you like. Try to collect lots of stars!

Developed By:
PhET Interactive Simulations
University of Colorado Boulder
http://phet.colorado.edu

Note: This game was built with HTML5. It runs on Chrome, Firefox, Opera, Safari or Internet Explorer 9 or higher. It is also optimized for iOS devices, including iPad, iPod, and iPhone.

Game Spotlight

Complete all levels to become a real Easter Bunny!

Fraction Matcher at PrimaryGames

Match shapes and numbers to earn stars in this fractions game. Challenge yourself on any level you like. Try to collect lots of stars!

Are you looking for unblocked games? PrimaryGames is the fun place to learn and play! Play cool games, math games, reading games, girl games, puzzles, sports games, print coloring pages, read online storybooks, and hang out with friends while playing one of the many virtual worlds found on PrimaryGames. All games are free to play and new content is added every week. We work hard to bring you best gaming content on the web! Each game is reviewed to ensure that is is safe for all ages. With over 1,000 flash game titles and growing we have the largest collection of cool games online. Whether you like Adventure or Racing, Classic Arcade or Action, Strategy Puzzles or Dress Up games, we have something for you!

PrimaryGames has a large collection of holiday games, crafts, coloring pages, postcards and stationery for the following holidays: Christmas, Halloween, Easter, Valentine's Day, St. Patrick's Day, Thanksgiving, Presidents' Day, Hanukkah, New Year's Eve and more. Every day is a day to celebrate!

Calling all Teachers! Visit our Curriculum Guide to find games and activities to meet your classroom's curriculum needs for Math, Science, Language Arts, and Social Studies. This quick guide contains content descriptions and grade level suggestions for all of the educational activities on PrimaryGames.


Resources

Energy Skate Park Basics

This simulation allows students to learn about conservation of energy with a skater dude! Students can explore different tracks and investigate the relationship between the kinetic energy, potential energy, and thermal energy of the skater. They can also build their own tracks, ramps and jumps for the skater.

Forces and Motion Basics

This simulation allows students to explore the forces at work when pulling against a cart, and pushing a refrigerator, crate, or person. Create an applied force and see how it makes objects move. Change friction and see how it affects the motion of objects.

Learning outcomes include:

Fraction Matcher

Fraction Matcher gives students the opportunity to explore the concept of fractions. The “Fractions Screen” contains eight levels of matching fractions using fractions less than one up to improper fraction representations for fractions greater than one. The “Mixed Number Screen” concentrates upon fractions greater.

Friction

This simulation can be used to demonstrate how friction causes a material to heat up and melt. It shows how when two objects are rubbed together they heat up. When one reaches the melting temperature, particles break free as the material melts away. Sample learning objectives include: *Describe a model for friction.


Translations

Language Download or Run Tips
Basque All Basque Eraiki zatiki bat
Bosnian All Bosanski Napravi razlomak
Chinese (Simplified) All 中文 (中国) 构建一个分数
Chinese (Traditional) All 中文 (台灣) Build a Fraction_建立一個分數
Croatian All hrvatski Napravi razlomak
Danish All Dansk Byg en brøk
Dutch All Nederlands Maak een breuk
French All français Construire une fraction
German All Deutsch Brüche bilden
Greek All Ελληνικά Φτιάξε ένα κλάσμα
Italian All italiano Costruisci una frazione
Japanese All 日本語 分数の計算
Kazakh All Kazakh Бөлшек түрінде жаз
Korean All 한국어 분수 만들기
Latvian All Latviešu Daļskaitļu veidošana
Mongolian All Монгол (Монгол) Бутархайг Бүтээх
Polish All polski Zbuduj ułamek
Portuguese (Brazil) All português (Brasil) Construir uma Fração
Russian All русский Запиши в виде дроби
Serbian All Српски Направи разломак
Slovak All Slovenčina Tvorba zlomkov
Spanish All español Construye una fracción
Spanish (Peru) All español (Perú) Haz una Fracción
Swedish All svenska Bygg ett bråk!
Tamil All Tamil பின்னத்தை உருவாக்கல்
Vietnamese All Tiếng Việt Tạo ra một Phân số

Fraction Matcher Online activity and game for 1st-3th grade math

In this activity, you match visual models of fractions (or mixed numbers) with other visual models, or with the fractions written as numbers. Place the two fractions or visual models that are equal in the two pans. Then click "CHECK", and if it is correct, click "OK".

At first, you choose whether you'd like to work with FRACTIONS or MIXED NUMBERS. Either way, there are lots of difficulty levels, giving you lots of practice. In the harder levels you'll need to simplify the fractions and think of equivalent fractions. You will earn stars from completing a level.

These activities will help students to identify fractions and equivalent fractions.

Credit: This activity is created by PhET

Screenshots from the game and activity:


PhET: Fraction Matcher - Mathematics

Maths IWB Resources
Abacus (at ICT Games)
Addition and Subtraction Tool
Angle Measurer (at TeacherLed.com)
Area Builder (at PhET)
Base Block Subtraction
Basic Angle Tool
Clock (ag Toy Theater)
An Clog Cainteach (ag CCEA)
Equivalent Fractions Demonstration Tool (at ICT Games)
Fish Times Tables
Fraction Bars (at Math Playground)
Fraction Bars (at Teacher Led.Com)
Fraction Decimal Percent Virtual Manipulatives (at ABCYa)
Fraction Number Line (at Didax.com)
Fractions: Intro (PhET)
Fractions: Mixed Numbers (PhET)
Fractions Teaching Tool (at Math Learning Center)
Fraction Wall (at Maths Bot)
Fraction Wall (at Visnos)
Geoboard (at Math Learning Center)
Geoboard (at Math Playground)
Geoboard (at Maths Bot)
Geoboard (at NL Virtual Manipulatives)
Geoboard (at Toy Theater)
Geometric Solids (at Illuminations)
Interactive Clock (at Teacher Led)
Interactive Clock (Time, Angles and Fractions)
Interactive 100 Square (at ICT Games)
Interactive Hundreds Chart (at Math Playground)
Interactive Triangles
Marble Jar Estimation Tool (at Toy Theater)
Math Balance (at Didax.com)
Multiple Representations Tool (at TT Rock Stars)
Number Line (at Math Learning Center)
Number Frames (at Math Learning Center)
Number Pieces (at Math Learning Center)
Number Rack (at Math Learning Center)
Paint The Squares (at Top Marks)
Pattern Blocks (at Didax.com)
Pattern Shapes (at Math Learning Center)
Percentage Fraction Decimals Grid
Percentage Fraction Decimal Wheel
Polygon Properties Explorer
Polypod (at Mathigon)
Rubber Band Reckoner (Estimation Tool)
Same or Different
Sieve of Eratosthenes (100 Square)
Teaching Clock (at Top Marks)
Ten Frame (at ICT Games)
Tessalation Creator (at Illuminations)
Thinking Blocks
Two Clocks Side-by-Side (at Visnos) Maths IWB Tools requiring Flash
Angle Measuring Tool (at TeacherLed.com)
Angle Sums (at Illuminations)
Area Tool - Advanced (at Illuminations) (Use IE)
Base 10 Blocks
Base 10 Manipulatives
Big Blue Calculator
Co-ordinates Grid (Use IE)
Crick's Interactive 100 Square
Equivalence Teaching Tool - Bars
Equivalence Teaching Tool - Pies
Equivalence Teaching Tool - Pies and Bars
Equivalent Fractions Teaching Tool (at Illuminations)
Fraction Paint 2x2
Fraction Paint 3x3
Fraction Paint 4x4
Fraction Paint 5x5
Fraction Paint 6x6
Fraction Scale (at Math Playground)
Interactive Circle (at Learn Alberta)
Interactive 100 Number Chart (at ABCYa) (Use IE)
Interactive Spinners (To Investigate Chance and Probability) (Use IE)
Number Line Interactive
Percentage Paint
Pictoram Graph Maker
Pie Chart Maker
Proportion Grids (at Top Marks)
Reflections (Use IE)
Splat Square 1-100
Teaching Clock (at eChalk)
Teaching Clock with current time (at Time-for-Time) (Use IE)
Teaching Clock with current time (at WM Net) (Use IE)
Venn Diagram (at Read Write Think)
Virtual Geoboard (at Connections Learning) (Use IE)
Virtual Geoboard (at Nrich.org) (Use IE)
Virtual Pinboard -->

IWB Activity and Tool Collections
Didax Virtual Manipulatives for Math
DreamBox Learning - Teacher Tools
Fractions & Decimals Teaching Resources
GeoGebra (Interactive Whiteboards and Manipulatives)
Illuminations
Interactive Whiteboard Activities (at Scholastic)
Math Learning Center
Math Manipulatives (at Math Playground)
Maths Bot Manipulatives
National Library of Virtual Manipulatives
PhET Math Simulations
Shapes and Measures (at Teacher LED)
Simulations (at PhET)
Teacher LED (Latest Resources)
Teaching Tools (at ICT Games)
Top Marks Interactive Whiteboard Activities
Virtual Manipulatives (Toy Theater) IWB Flipcharts
MIC Students' Flipcharts (at Promethean) -->

Activity Collections
ABCya Math Games
A Plus Click (Math and Logic Problems)
Bobinogs (at BBC)
Brain Pop
CBeebies Games (at BBC)
Cookie
Count On
Count Us In
Data Games
Digi Puzzle Maths Games
DreamBox (Interactive Maths Activities)
Education.com Math Games
E-Lab Animated Interactive Tutorials
Encyclopaedia Britannica Games Collection
Fun Brain Kids Center
Hooda Maths Games
Illuminations (Maths Games and Activities)
Inclusive Games (at Help Kidz Learn)
Interactivate: Assessment Games
IXL - Graded Maths Activities (Not Free)
Knowledge Builder Games (at Maths Adventures)
KS1 Bitesize Maths and Literacy Activities (at BBC)
KS2 Bitesize English/Maths/Science Activities (at BBC)
Manga High (Log In Needed)
Math Chimp
Math Craft (Self-evaluation)
Mathsframe
Math Games
Math Games (at Room Recess)
Math Game Time
Mathletics - Graded Maths Activities (Not Free)
Math Pickle (Puzzles and Games)
Math Playground
Maths For Kids
Maths Frame - KS2 Games and Resources
Maths Puzzles
Matific (Math Activities for K-6)
Nasa Kids Club
Novel Games
Pauly's Playhouse
PBS Kids Games
PBS Kids Cyberchase Games
Planet Arcade (at NOAA)
Primary Games Arena
Primary Interactive
Puzzle Games
Puzzle Monster
Room Recess
Sheppard Software Math Collection (Flash required)
Smart-Kit (School-Safe Puzzle Games)
Smarty Games
Snappy Maths
Solve Me - Puzzles
Tang Math Games
That Quiz - Maths Test Activities
Toy Theater Math Games
Transum Mathematics
Turtle Diary Math Games
Tutor Bot
XP Math Games


PhET: Fraction Matcher - Mathematics

An excellent fractions matching game at different levels of difficulty making it very versatile in use. There is an option to play the games against the clock and also with mixed whole numbers and fractions. Highly recommended.

A great teaching tool for fractions. Use a bar or circle to represent, compare, and perform operations with fractions with denominators from 1 to 100. Reveal or hide numeric labels as needed.

This teaching tool helps with the recognition of fraction relationships. It helps students to visualise fractions, understand denominators, equivalent fractions and mixed numbers.

An interactive learning resource where you can explore fractions and equivalent fractions. It is useful for demonstrating improper fractions. The accompanying fractions game has various levels of difficulty.

An interactive resource where you can make equivalent fractions using different numbers and try the game to match fractions in different picture patterns to test your knowledge.A useful teaching tool on an interactive whiteboard.

Challenge yourself to build fractions from shapes and numbers. It helps with the concepts of equivalent fractions and mixed numbers.

A teaching tool manipulative which works well on an interactive whiteboard and is useful for demonstrating fraction equivalents and more.

Splat the fruit in this fractions addition game. There are six levels of difficulty.

A fraction game where you need to meet orders in a cake shop. Match customer orders written as fractions to cakes that have been cut into segments.

Design some zoo enclosures for sick cassowary birds. Good practise for equivalent fractions.


PhET: Fraction Matcher - Mathematics

PhET Development Overview

PhET Interactive Simulations creates free, open source educational simulations in science and math, which you can find at the PhET website. This document explains PhET’s libraries, practices and patterns for developing interactive simulations in HTML5. This document is also available at https://github.com/phetsims/phet-info/blob/master/doc/phet-development-overview.md. For discussion and feedback, please visit the Developing Interactive Simulations in HTML5 Google Group.

Getting Started (for Windows)

In order to get the code for an existing PhET simulation, you will need to follow several steps (also shown in the Developing with PhET: Getting Started (on Windows) screencast):

Checking out the code and running it in development mode

(a) Choose the option to create a desktop icon for “git bash”, if it is not already selected. 2. Use Git to check out the code for PhET Libraries and Simulations

(a) Open Git Bash (from the link on your desktop or through the Start menu)

(b) Create a directory for your development: mkdir phetsims

(c) Change directory to phetsims: cd phetsims

(d) Run these git clone commands:

  1. Download & install node+npm from https://nodejs.org/en/
  2. Launch a node server program on your development machine

(a) Install the http-server as a command line program. Use a different command prompt than the one above since the one above will not have the new path for npm npm install http-server -g

(b) Change into the phetsims directory (if you were not already there). cd phetsims/

(c) Run the http server program (with caching turned off to help with iteration) http-server -c-1

  1. Open a browser to the path for one of the simulations: http://localhost:8080/example-sim/example-sim_en.html
  2. For building the simulations, install the grunt command line utility (may require sudo): npm install -g grunt-cli
  3. Run npm config set save false so that package-lock.json files are not created.

Now you can test modifying the simulation code and see the changes by refreshing the browser. You can also use this to test on remote devices after looking up your ip address. If developing on Chrome, note that it can be helpful to set "Disable cache (while DevTools is open)" (see the devtools settings). Questions should be directed to the Developing Interactive Simulations in HTML5 Google Group.

Getting Started (for macOS)

In order to get the code for an existing PhET simulation, you will need to follow these steps:

Checking out the code and running it in development mode

  1. Download and install Git from http://git-scm.com/downloads a. You may need to allow the system to run apps downloaded from anywhere i. Open the Apple menu ii. System preferences iii. Security & Privacy iv. Click the lock to make changes v. Allow apps downloaded from “anywhere” vi. After you have installed git, you can restore the prior security settings
  2. Use Git to check out the code for PhET Libraries and Simulations a. Open the “Terminal” application i. Click the search icon (magnifying glass) in the top right of the desktop ii. Type “Terminal” iii. Click on the terminal icon a. Create a directory for your development: mkdir phetsims b. Change directory to phetsims: cd phetsims d. Run these git clone commands:

When running the first git clone command, it may show a dialog that says: The “git” command requires the command line developer tools. Would you like to install the tools now? In this case, press “Install”.

  1. Download & install node+npm from http://nodejs.org/en
  2. Launch a node server program on your development machine a. Install the http-server as a command line program using the Terminal npm install http-server -g If that yields an error like “Please try running this command again as root/Administrator.” then run using the sudo command like so: sudo npm install http-server -g b. Change into the phetsims directory (if you were not already there). cd phetsims/ c. Run the http server program (with caching turned off to help with iteration) http-server -c-1
  3. Open a browser to the path for one of the simulations: http://localhost:8080/example-sim/build/phet/example-sim_en_phet.html
  4. For building the simulations, install the grunt command line utility (may require sudo): npm install -g grunt-cli Now you can test modifying the simulation code and see the changes by refreshing the browser http://localhost:8080/example-sim/example-sim_en.html. You can also use this to test on remote devices after looking up your ip address. Questions should be directed to the Developing Interactive Simulations in HTML5 Google Group.
  5. Run npm config set save false so that package-lock.json files are not created.

Now you can test modifying the simulation code and see the changes by refreshing the browser. You can also use this to test on remote devices after looking up your ip address. If developing on Chrome, note that it can be helpful to set "Disable cache (while DevTools is open)" (see the devtools settings). Questions should be directed to the Devloping Interactive Simulations in HTML5 Google Group.

After checking out the dependencies and installing grunt-cli in the preceding instructions, you can create your own simulation using the template.

  1. Check out the template sim, called ‘simula-rasa’ using this git clone command: cd phetsims git clone https://github.com/phetsims/simula-rasa.git
  2. Install the chipper dependencies: cd chipper npm install
  3. Install the perennial dependencies: cd ../perennial npm install
  4. Use the perennial ‘grunt’ task to create a new sim, like so (still in the perennial directory): grunt create-sim --repo=NAME --author=AUTHOR For instance, if the simulation is going to be named Acceleration Lab and the author is Jane Doe, then you could put: grunt create-sim --repo=acceleration-lab --author="Jane Doe"
  5. Test the created simulation in the browser and make sure it launches. It should be a blank simulation. Write to the Developing Interactive Simulations in HTML5 Google Group if you run into problems.

Building and Testing (Windows and macOS)

Building the Simulation with chipper

Working with Git and GitHub

Pulling the latest changes Creating an issuehttp://localhost:8080/example-sim/build/example_sim.html Committing Submitting a pull request

Using Chrome dev tools to debug a simulation

Source code and Dependencies

Our simulations and dependencies are hosted publicly on GitHub: https://github.com/phetsims

We have 40+ repositories for the simulations and their dependencies, all of which can be found here: https://github.com/phetsims?tab=repositories.

Below is a list of some of the repositories that contain libraries and frameworks upon which the individual simulations depend.

  • scenery: A general scene graph for rendering the graphics and handling the input. Documentation site for scenery
  • axon: for model implementation
  • assert: assertion framework for development testing
  • phet-core: inheritance, extension and other utility functions
  • phetcommon: higher-level common dependencies
  • scenery-phet: PhET-specific scenery graphics and input handlers
  • joist: Framework for application loading, launching, and handling tabs
  • dot: Mathematics framework for model & view
  • kite: Shape library
  • sun: Graphical user interface components, such as buttons, checkboxes, etc
  • sherpa: All of our 3rd party dependencies
  • chipper: Tools for developing and building simulations.
  • perennial: Maintenance tools that won't change with different versions of chipper checked out

Checking out the HTML5 code from GitHub

Our example-sim repository README.md includes a list of git clone commands that will check out the example simulation and all of its dependencies: https://github.com/phetsims/example-sim

And to clone some of our in-development sims: git clone git://github.com/phetsims/forces-and-motion-basics.git git clone git://github.com/phetsims/build-an-atom.git

All repositories should be cloned into the same directory so that relative paths will work.

Here is a full list of all phetsims repositories. If the sim won’t launch due to a missing dependency, you may need to check out some more of these repos: https://github.com/phetsims?tab=repositories

Also note that this will check out the ‘master’ branch of all of our dependencies, which may create breaking changes intermittently if you remain up-to-date with them. If you run into any breaking changes, please notify us immediately. Also, we recommend developing your code on a public repo such as GitHub to enable us to test and update your simulations as common dependencies are changed.

Master is Unstable: Accessing Rigorously Tested Code

The master branch of the PhET simulation and library repositories is constantly under development and not guaranteed to be stable. It is our intent that the master branch of simulations + libraries will build and run properly, but sometimes the code goes through intermediate states where errors can be introduced. On the other hand, our published simulations have been rigorously tested across 18+ platforms and are the most stable option. If you are adapting a PhET simulation, or would like to access simulation code that corresponds directly to one of our published versions, then you will need to check out specific SHA revisions in all of the appropriate repositories. Checking out these fixed, tested revisions is also important when working on a release-candidate branch of a simulation. Here are the instructions:

  1. First, identify the version for which you want to check out the source code, for example: http://phet.colorado.edu/sims/html/area-builder/latest/area-builder_en.html
  2. Navigate to a file named dependencies.json at the same path, for example: http://phet.colorado.edu/sims/html/area-builder/latest/dependencies.json
  3. Download the dependencies.json file to the root of the simulation directory.
  4. Open a command prompt and cd into the root of the simulation directory.
  5. Run grunt checkout-shas . This step will read from the dependencies.json file and check out all of the SHAs corresponding to the entries in the file.
  6. To checkout the SHA for the simulation itself, first look up the SHA in the dependencies file, move the dependencies file to some other location or delete it, and use git checkout to check it out the appropriate SHA. (Note future version of grunt checkout-shas may handle this last step).
  7. Inspect the simulation and its dependencies to make sure grunt checkout-shas had the intended effect of getting the right SHA for each repo.

Now you can use the published source code. To restore each branch to master, you can run grunt checkout-master .

  1. Running grunt checkout-shas gives errors when the working copy is not committed. These grunt commands are currently only supported for clean git repos. Stashing may be a way around this problem. Also, if you want to use dependencies from a different version than in the SHAs, that will have to be done as an additional manual step.
  2. When working in a branch, grunt checkout-master will check out the master branch and additional manual steps will be required to get back to the desired branch(es). For instance, this is an issue when working with the “adapted-from-phet” branch of brand.

Original Java/Flash Source Code

Follow the directions at this link to get the source code for original Java and Flash version of the simulations: http://phet.colorado.edu/en/about/source-code

After checking it out (could take 30+ minutes), the source code for the simulations are located in (for example): svn-checkout/trunk/simulations-java/simulations/forces-and-motion-basics

PhET Simulations use around 3 open source 3rd party dependencies for the deployed source code, and more for the build phase. They are all included with the source code checkouts in the sherpa repository. The libraries and licenses are described in this 3rd party dependency licensing document

New simulations should be published under GPLv3 and reusable library dependencies should be published as MIT.

To improve the readability and maintainability of PhET Simulation code, we have identified several style recommendations for writing code and documentation:

The PhET Code Review Checklist is available at https://github.com/phetsims/phet-info/blob/master/checklists/code_review_checklist.md provides additional steps to make sure a simulation is well written. This checklist is used for publication of any new PhET simulation to make sure they are consistent and maintainable. It enumerates steps including but not limited to coding style.

An IntelliJ IDEA formatting XML file to automatically format code. This is the ground truth for how PhET code should be formatted. Our example-sim also shows how to use our libraries idiomatically as well as a good example of code commenting + documentation.

We also tend to agree with most of the guidelines set out in idiomatic.js.

The simulation should be tested and run on the platforms linked below. In our experience to date, some optimization is often required to obtain acceptable performance on tablets such as the iPad.

Modularity with ES6 Modules

The current iteration of PhET's simulation codebase uses native Javascript modules, which were introduced in ECMAScript 6. For PhET specifically, default exports are only used (as opposed to named exports). ES6 Modules are used to support modularization of the JavaScript code. Information about ES6 Modules can be found here. Examples of how it will be used by PhET can be seen in the Example Simulation (specifically the source files in the js directory).

Minimum width x height: 768x504 (1.52:1, inside Mobile Safari)

The simulation should scale isometrically such that all portions are visible at any resolution. An example of this type of scaling can be seen in the example simulation.

A minification and unification process is implemented in our repo https://github.com/phetsims/chipper. This can be used to create a single-file HTML that contains all images and audio, and is suitable for download for offline usage.

Here's an example of how to compile example-sim into a single HTML file. Other sims would be compiled similarily. This assumes that you have all of example-sim's dependencies checked out in your local working copy.

It is a requirement that all PhET simulations can be downloaded and run off line in all identified browsers from the file:// URL. PhET’s chipper build process (described above) produces a single file that can be downloaded for offline use. Please make sure you are not using any APIs that prevent launching and running properly when offline using file:// URL., and test that offline operation works properly for your simulation.

Here is a link to some published sims, so that you can see a demonstration of how some things should look and behave: http://phet.colorado.edu/en/simulations/category/html

Development Process and Checklist

The steps to create a fully functional PhET simulation, given an existing Java/Flash version or development specification:

  1. The simulation and its code: a. must use the appropriate libraries in the correct fashion b. must be adequately commented c. must contain no dead code (i.e. commented out code that does nothing) d. must be maintainable e. reusable components should be polished and moved to the appropriate libraries f. should pass all jshint tests when running chipper, and should be compiled into a single file HTML file h. original vector artwork for anything appearing in the images/ directory should be checked into the assets/ directory. i. must run with ?ea (assertions) enabled without any assertion errors being triggered
  2. Simulation & User Interface Testing a. Testing on our supported platforms and identification of problems on different browsers b. Performance must be sufficiently fast on all supported platforms. i. The simulation should start in <8 seconds on iPad3 ii. We strive for a steady 60fps on iPad3 when possible c. The simulation should be tested with assertions enabled: ?ea d. The simulation should be tested for touch areas: ?showPointerAreas
  3. Code review a. The code will be reviewed by one or more PhET developers in order to identify possible bugs or maintenance problems b. Issues raised in the review will be addressed
  4. Release candidate testing a. Before publication, a release candidate branch is created so that the branch can be thoroughly tested and, if no significant bugs are found, published
  5. Publication a. The simulation is made available on the PhET website
  6. Maintenance a. the simulation is published and any bugs reported by students or teachers will be resolved

Utilities and Instrumentation for Development and Testing

Many aspects of a simulation must be developed properly and working well in order for the simulation to behave properly across our many supported platforms. PhET has developed several utilities and instruments to make this development and testing easier. The most up-to-date documentation for the query parameters is available here: https://github.com/phetsims/chipper/blob/master/js/initialize-globals.js

  1. Query parameter: ?screenIndex . This query parameter may be used to specify the initial screen of the simulation. It can be paired with standalone above to launch just a specific screen of the simulation. For instance: http://localhost:8080/energy-skate-park-basics/energy-skate-park-basics_en.html?screenIndex=1&standalone launches Energy Skate Park: Basics using only the 2nd screen.
  2. Phet Allocations: Object instance allocation tracking, so we can cut down on garbage collection. See https://github.com/phetsims/phet-core/blob/master/js/phetAllocation.js Sample usage: a. Run the sim and set up the scenario that you wish to profile b. In the JS console, type: window.alloc=<> c. Wait until you have taken enough data d. Type x = window.alloc delete window.alloc Now you can inspect the x variable which contains the allocation information.
  3. Run with query parameter ?ea to enable assertions in the code. The sim should run without any assertion errors. (Assertions are predicates about what should be true at specific points in the code. They are used to identify programming errors.)
  4. Query parameter: ?showPointerAreas . This query parameter shows the areas for mouse and touch input events. On mobile devices (and sometimes for mouse) it is essential to increase the interaction region for a scenery node. Touch areas are shown in red and custom mouse areas are shown in blue.
  5. makeRandomSlowness(). This method can be called after the simulation is started to simulate an intermittently slow system. This can be used to help replicate bugs that only happen intermittently or only on slow platforms. To call this method, launch the sim, show the developer console, and type the command as above.
  6. makeEverythingSlow(). This method can be called after the simulation is started to simulate a slow system. This can be used to help replicate bugs that only happen intermittently or only on slow platforms. To call this method, launch the sim, show the developer console, and type the command as above.
  7. Query parameter: ?profiler . Launching a sim with ?profiler will print out the time to create each screen, and will show a histogram which updates every 60 frames depicting how long the frames are taking (in ms). Note: just showing the average FPS or ms/frame is not sufficient, since we need to see when garbage collections happen, which are typically a spike in a single frame. Hence, the data is shown as a histogram. After the first 30ms slots, there is a ++= showing the times of longer frames (in ms)
  8. Usage of Unit Tests: After making changes in one of the repos with unit tests (see if tests/qunit exists), run the unit tests afterwards (tests/qunit/unit-tests.html) to see if anything is broken. We highly recommend checking "Hide passed tests", and wait until all tests are complete (it may pause at 0 tests complete at the start).
  9. Adding Unit Tests: If you want to add a test, add it to one of the tests/qunit/js/* files that have a QUnit module( '. ' ) declaration, and read the QUnit tutorials to understand how it works. You can add new files with more tests by creating the file and referencing it in tests/qunit/js/unit-tests.js (whose purpose is to load those files).
  10. Namespaces for Unit Tests and Playground: Each unit-tests.html makes certain namespaces global (e.g. Scenery's makes window.scenery/kite/dot/axon/core for Scenery/Kite/Dot/Axon/phet-core respectively).
  11. Playground: If it exists, it will be a tests/playground.html, and allows testing code in the console. To make code available in the console, check the 'main' file used by the playground and add a reference there. For instance, Scenery's playground.html loads 'scenery/js/main.js', and saves it to window.scenery.
  12. Run grunt lint on the command line to check for lint errors. All code should be free of lint errors. (lint is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. PhET uses the eslint variant of lint.)
  13. Install PhET's git hooks to run basic checks as part of the git lifecycle. Run these commands from the root of your checkout. First it clears any pre-existing commit hooks, then installs the new hooks.

The git hooks may run unit tests in the repo which require a configuration that is specified in

/.phet/build-local.json . Describing all the entries of build-local.json is beyond the scope of this document, but to successfully commit with these hooks to repos with unit tests your build-local.json will require key localTestingURL . If you followed steps in this document to install http-server , the entry would look like

Getting to optimal performance on all supported platforms can be tricky--this section enumerates possible optimizations strategies:

  1. Consider using WebGL.
  2. Reduce allocations (including but not limited to closures) during animation.
  3. Eliminate closures and move values to properties and prototypes, see https://github.com/phetsims/scenery/issues/664.
  4. Consider replacing color strings with color constants, see https://github.com/phetsims/sun/issues/312.

Working with GitHub Issues

When the problem described in a GitHub issue is solved, a description of the solution should be made in the issue and the issue should be reassigned to the original reporter of the GitHub issue for verification and closing. Commits that address the GitHub issue should also reference the issue in the commit message, so the change set can be easily reviewed.

Here are some example issues that show creation of an issue, solving it with a commit message that references the issue, an explanation of the solution and reassignment to the reporter for verification and closing: https://github.com/phetsims/color-vision/issues/15 https://github.com/phetsims/fraction-matcher/issues/56 https://github.com/phetsims/color-vision/issues/37

Embedding a Simulation in your website

To embed a simulation in your website, use an iframe like so:

The aspect ratio 834x504 is used for new simulations, because it matches the aspect ratio available on popular devices.


PhET: Fraction Matcher - Mathematics

Description

Download PhET 1.0 from our software library for free. PhET is suitable for 32-bit versions of Windows XP/Vista/7/8/10. The actual developer of the free software is University of Colorado. Our antivirus scan shows that this download is safe. The following version: 1.0 is the most frequently downloaded one by the program users. The current installer available for download requires 499.2 MB of hard disk space. PhET lies within Education Tools, more precisely Science Tools.

The full PhET Offline Website Installer package installs a copy of the PhET website onto your computer. Once installed, you do not need to be connected to the Internet to view or run any of the simulations (as long as you have Java, Flash, and a web browser such as Firefox or Internet Explorer).

You may want to check out more software, such as Energy Skate Park, Rutherford Scattering or Circuit Construction Kit DC and AC, which might be similar to PhET.


Watch the video: Fraction Matcher (September 2021).