FlaskFiller is a learning tool to explore instantaneous speed in primary school. It has been made as part of a research on teaching instantaneous speed in grade 5. During this research, four teaching experiments have been performed and in each experiment used a new version of the software has been developed and used. After the last experiment a more polished version of FlaskFiller has been developed. You can download and use this latest and greatest version of FlaskFiller here!
The easiest way to use FlaskFiller is to open it in your web browser. You then can save FlaskFiller to a folder on your computer and use it without an internet connection, send it to others by email, putting it on your own website, and so on. All you need to use FlaskFiller is a FlaskFiller HTML file and a modern web browser, such as Firefox or Chromium.
Because FlaskFiller is free software you can download its source code and adapt it to your liking. See the section on adapting FlaskFiller for more information on creating your own FlaskFiller.
FlaskFiller consists of four configurable components (see Figure 1) that interact with each other:
-
In Figure 1, you see the simulation of filling a cocktail glass with a greenish liquid and a beer glass with a purple liquid. To start the simulation of filling a glass, double-click on a glass or use the control (see the last component). Clicking on a glass that is being filled, pauses the simulation. Changes in the simulation are reflected in the other three components (and vice versa).
You can drag glasses around in the simulation. When you drag a glass over another glass, it snaps to that other glass' center line. This makes it easier to align different glasses.
Do note that the glass' position in the simulation has no effect on the other components. As you can see in Figure 1, the beer glass have been moved about 2cm, yet its graph still starts at 0cm. This is intentional.
When you move your mouse pointer over a ruler, a red helper line will show.
-
In the graph component you see a line graph of the cocktail glass and a bar chart of the beer glass. FlaskFiller also has a third type of graph, the arrow graph. You can enable the arrow chart via the settings tab (which is discussed in the next section: Configuring FlaskFiller) to explore what it does.
In Figure 1 the mouse cursor hovers over the cocktail glass' line graph at the point (1.31s, 12.19cm). You can configure FlaskFiller to show different aspects of the situation described by a point on a line graph. Furthermore, you can choose which quantities to plot on the axes. FlaskFiller supports quantities time, height, volume, and the rising speed.
-
On the bottom you see the control component combined with the table (more about that later). Using the control you can start, pause, restart or finish the simulation. You can also show or hide graphs, change the step-size of a bar chart and arrow graph. To change the color of a glass' liquid, you click on its colored square. A random color will be chosen.
Furthermore, through the control component you can add and remove a glass. Note the option to add an extensible highball glass. The extensible highball glass is the only glass that can be added multiple times. And you can change its size by dragging its handle at the upper-right corner of the glass.
-
Finally, the situation of filling glassware is described quantitatively by a table. The table component is combined with the control component. You can configure what quantities to show in the table component, if any. Furthermore, the values in the quantities' columns can be edited. For example, if you would change the cocktail glass' volume to 100ml and press Enter, the table, simulation, and graph components will be updated to reflect that change.
Each component but the control can be hidden. If your web browser window is too small, the graph component will be shown below the simulation instead of alongside it. If you change the browser window's size, reload the page to have it resize properly.
FlaskFiller is highly configurable. Settings are stored in the web browser. When you open FlaskFiller again in the same web browser, it will use the same settings as you had when you had last time you used FlaskFiller.
Open the Settings tab to configure the following aspects of FlaskFiller:
-
General: select which components you want to show in FlaskFiller. By default the simulation, graph, table, and control components are selected. You cannot deselect the control component.
-
Simulation: change the height of the simulated world. After changing the height, the FlaskFiller application needs to be reloaded.
-
Graph:
-
Select the horizontal axis' quantity, which is one of height, time, volume, or rising speed.
-
Select the vertical axis' quantity, which is one of height, time, volume, or rising speed. Note that you can select the same quantity for both axes, which can make for an interesting topic of discussion.
-
Select which graph types can be shown. The supported graph types are:
- line graph
- bar graph
- arrow graph
You can show or hide a graph of a particular glass by toggling its corresponding icon in the control component.
-
Various options:
- Show the coordinates of the point on a line graph the mouse points at.
- Show the rising speed in the point on a line graph the mouse points at.
- Show the tangent line to the point on a line graph the mouse points at.
- Show a slider to change the step-size between the subsequent bars in a bar graph or the arrows in an arrow graph.
- Make the line graphs of the extensible highball glass moveable. This allows you to move these line graphs over other graphs to explore the idea of a tangent line.
-
-
Table: select which quantities to show. You can enable each of height, time, volume, and rising speed.
-
Control: select which glasses can be added in FlaskFiller. You can select the following glasses:
- cocktail glass, which will be shown by default if selected
- highball glass
- extensible highball glass, which can be added multiple times
- wine glass
- cognac glass
- beer glass.
When FlaskFiller needs to be reloaded for the changes to take effect, you will see a message on top of the settings tab.
FlaskFiller is free software; FlaskFiller is released under the GPL version 3. This means that you can use, adapt, and distribute FlaskFiller as long as these adaptations are published under the same free license. The FlaskFiller source code is released on github.
Furthermore, FlaskFiller is build using the following free and/or open source libraries:
- The simulation component is build with Raphaël.js
- The graphing component is build with d3
- The user interface is made with Bootstrap and jQuery
- The icons used are from Font Awesome
You can download FlaskFiller's source repository by cloning it to your hard drive and install it as follows (on an UNIX-like operating system):
git clone https://github.com/htdebeer/flaskfiller.git
cd flaskfiller
npm install
If you change the JavaScript code, use npm run build to generate a new
version of the FlaskFiller.js base library.
To generate a standalone version of FlaskFiller or a custom version of it, a
Bash script is supplied:
create_standalone.sh. This script uses Pandoc to
generate the standalone version with all the assets embedded.