Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


V4 (Feb 28, 2018)

Issues with V3 sketch:

  • it's possible to get into a "locked" state where the jump key doesn't appear to do anything
  • it was hard to predict where the magnet will travel to especially if you're jumping quickly multiple times.

V4 seeks to address this issue by having the jump behaviour work the same regardless of where you are on the screen.


  • When jump key is held, a place holder appears in the location where movement will stop.
  • When jump key is released
    • if the magnet is in the left half of the screen, the magnet will move to the right.
    • if the magnet is in the right half of the screen, the magnet will move to the left.
    • the distance moved left or right in all situations will be 50% of the play area width.
      • i.e. the magnet will move half a screen width each jump. If the magnet is in the left edge, a jump will put it in the middle.
      • Why 50%? This increases the chances that a jump does something "interesting" if it is around the magnet.

Image Added

Edge case: magnet is in the center of the play area, does the jump go left or right?

  • In this case the jump should go in the direction of the last known move
  • If the magnet was moving left previously, the next jump will move it left.

Edge case: If the last move was a mouse drag and drop, what direction does the jump go?

  • (same as above in Summary) if the magnet is in the left half of the screen, the magnet will move to the right.
  • (same as above in Summary) if the magnet is in the right half of the screen, the magnet will move to the left.

Edge case: if the magnet is dragged and dropped into the exact centre where does the jump go?

    • The jump goes in the direction based on the horizontal direction of the mouse drag and drop.
    • i.e. if the mouse was dragging left and dropped in the centre, the jump will go left

Edge case: if the user is moving vertically in centre axis, where does the jump go?

  • (question) Unsure what should happen in this case.
  • Option 1: Just arbitrarily move it in a direction (left or right)
  • Option 2: Go back in history to see what the last horizontal movement was and jump in that direction.
  • Option 3: ???

Table of Contents

V3.1 (Feb 1, 2018)

Jump key ("J") tap (press and release):

  • The magnet jumps to it's reflected position on the other side of the bisecting vertical axis (see image 4 below).

Jump key ("J") press and hold (not needed for prototype):

  • As long as the jump key is pressed, a placeholder (aka. "Ghost") appears where the magnet will jump to.
  • Upon releasing jump key, the jump begins.

Jump speed keys (press and release):

  • Number 1 key - jump moves in slow speed
  • Number 2 key - jump moves in moderate speed (default)
  • Number 3 key - jump moves in fast speed

V3.0 (Jan 23, 2018)

Keyboard similar to moving the ruler in Coulomb's Law sim with the addition of a jump key.

Cursor key tap (press and release)

  • moves the magnet 1 step
  • with modifier 1: moves the magnet 1 large step
  • with modifier 2: moves the magnet 1 small step

Cursor key pressed and held:

  • moves the magnet continuously in a direction after an initial delay.
  • with modifier 1: moves the magnet quickly continuously in a direction after an initial delay.
  • with modifier 2: moves the magnet slowly continuously in a direction after an initial delay.

With the above cursor key control scheme above, additional keyboard interaction may be needed to facilitate the quick experimentation and discovery. In particular learners who tire easily or have dexterity preferences may find it challenging to repeatedly tap or press cursor keys. In this V3 sketch, the idea is to add a way for someone to quickly "jump" the magnet across the playing area and enable quick experimentation which hopefully leads them to uncovering the intended learning outcomes

Illustration of the Jump Interaction

Image Added

Image 1 (above): initial screen for Faraday's law.

Image Added
Image 2 (above): Magnet receives keyboard focus. 4 arrows appear around the magnet to indicate the possible directions to move.

Note: the vertical dashed line is for illustration purposes only.

Image Added
Image 3 (above): The J key is pressed to initiate a jump action. A placeholder appears on the other side to indicate the destination of the magnet.

Image Added

Image 4 (above): This is a diagram showing the behaviour of a jump depending on the position of the magnet at the time jumping starts.

Design thinking:

  • horizontal movement is the most important, so restricted the movement to keep it simple
  • although it might be leading the user somewhat as to how to interact, it doesn't give away or answer fundamental questions about Faraday's Law

Concern - the behaviour may be unusual and require a few uses before understanding how jumping works. The placeholder seen before jumping is intended to help with the ambiguity. Other things that should help: good labeling and descriptions for the action.

Image Added
Image 5 (above): The J key is released and the magnet begins moving horizontally in a straight line to the other side of the play area. The speed in which it moves is the default speed (exact speed TBD). This sketch also includes a faster and slower jump speed (see below).

Image Added

Image 6 (above): the magnet continues moving horizontally.

Image Added

Image 7 (above): the magnet has reached its destination, and the focus remains on the magnet. The direction arrows return to indicate possible directions the magnet can move in.

Image Added

Image 8 (above): Jump movement speed can be faster by pressing J+Modifier.

Image Added

Image 9 (above): The magnet is moving quickly across.

Image Added

Image 10 (above): magnet has stopped.

Image Added

Image 11 (above): The jump movement can be slower by pressing J + 2nd modifier key.

Next Steps:

  • explore idea of 4 directional jumps
  • explore better feedback for jump action and distance

Evolving Idea (Nov 30, 2017)

Idea is to have a control scheme inspired by 80's video games like Snake and Asteroids.

Controlling Direction:

  • Movement is controlled by the direction keys.
  • Once a direction key is pressed, it will continue to move on its own in that direction.
  • Direction can be changed at any time by pressing any of the other direction keys
  • Changing directions does not change its speed - it continues at the speed it was traveling at.

Controlling Speed:

  • Speed is controlled by dedicated keys like CTRL and ALT to increase and decrease, or 1 - 2 - 3 to change speeds to slow, moderate, and fast.
  • Stop is controlled by space bar (or some other key)

Unlike the v2.0 sketch below, this evolving design idea uses the direction keys to control just the direction - making it simpler to understand and control. Speed is mapped to another set of keys making it easier to just focus on movement once you have a speed you like.

Hybrid model:

  • Positioning by stepping

V2.0 (Nov 17, 2017)

The following is a sketch depicting a possible keyboard interaction for the Faraday's Law simulation (


link to Faraday's Law Simulation at PhET). Understanding speed of magnet movement as it relates to flux is an important learning outcome, and this sketch aims to minimize the dexterity / motor function required to successfully gain the learning outcomes. 

In the current simulation, the speed of which the magnet moves is directly correlated to the user's physical ability to manipulate the input device. This requires significant dexterity and motor function to accomplish.

In this design sketch, once the user as chosen a direction, the magnet will move in that direction on its own (continuously) like an object floating through space. The user can then choose to increase or decrease the magnet's movement speed (like a throttle), stop, or immediately reverse direction. By allowing the magnet to move on its own, this enables the user to focus on direction and speed without requiring significant motor control or dexterity.

NOTE: Text descriptions of images currently being updated.

Image Modified

Image 1 above: The initial screen for Faraday's law.

Image Modified

Image 2 above: Keyboard focus placed on the magnet.

Image Modified

Image 3 above: Enter is pressed and the user can begin to move the magnet in a direction they choose.

Image Modified

Image 4 above: User has pressed the left arrow key once, and the magnet begins creeping to the left by itself. A single arrow appears in the direction the magnet is moving that indicates it direction and speed.

Image Modified

Image 5 above: User has pressed the left arrow again, and the magnet increases its speed. Two arrows now appear in the direction the magnet is moving to indicate its direction and moderate speed.

Image Modified

Image 6 above: User has pressed the left arrow again, and the magnet is now moving at its maximum speed. Three arrows now appear in the direction the magnet is moving to indicate its direction and maximum speed.

Image Modified

Image 7 above: The user can stop the movement of the magnet any time by pressing ESC, Enter, or any direction key other than the direction they are moving in. The intention is to make it easy to stop movement and give control to the user.

Image Modified

Image 8 above: The user has tapped the right arrow key three times, so the magnet is now moving right at a fast speed by itself.

Image Modified

Image 9 above: The user can reverse the direction any time by pressing the spacebar. This way the student can experiment with speed and movement easily with the spacebar (easy to press) and a few taps of the arrow keys.

Image Modified

Image 10 above: To summarize, the arrow keys control the direction of travel. Once the magnet begins to move, it will continue to do so on its own. It can increase its speed with subsequent presses of the arrow key, switch directions, or stop.

Possible Design issues

  • The "Wild Ride" phenomenon
  • How many steps in the throttle?
  • Instead of stopping the magnet if a different direction key is pressed, what if the magnet continued moving in the new direction at the same speed?
  • What would it be like to have two modes for keyboard interaction: standard cursor control style of interaction, and this "throttle" control scheme?


Image Modified

Image 1 Above: Initial view

Image Modified

Image 2 Above: User has pressed tab and focus is moved to the magnet.

Image Modified

Image 3 Above: User has pressed Enter, and the magnet is now able to be moved using keyboard.

Image Modified

Image 4 Above: User is in a move state and is also pressing a modifier key, the magnet moves in larger steps. The arrows on the magnet change to visually indicate the change.

Image Modified

Image 5 Above: User is holding a different modifier key, the magnet moves in smaller steps. The arrows on the magnet change to visually indicate this change.

Image Modified

Image 6 Above: Describes a possible issue with keyboard interaction and speed of moving the magnet.


Current is related to the speed of magnet movement.

Faster the magnet moves, the greater the current.

Slower the magnet moves, the smaller the current.


In this scenario to the left, it will take a keyboard user 4 keystrokes to move to the other side of the coil (as indicated by the green dots).

If the user has sufficient motor acuity, they can move the magnet quickly by holding down the modifier and repeated tapping of keys.

If the user does not have sufficient motor acuity, it will be difficult"