HNM Simulation Documentation
1
Setting up phetsims
1.1
Introduction to phetsims
1.2
Cloning phetsims on your local machine
1.2.1
Windows
1.2.2
Mac
2
Overview of an example simulation
2.1
Introduction to Newton-Raphson Method
2.2
Derivation
2.3
Algorithm
3
Overview of the components
3.1
Introduction to Brand
3.2
What is the js folder?
3.2.1
What is the common folder?
3.2.2
What is the newton-raphson folder?
3.3
What is a model folder?
3.4
What is a view folder?
3.5
What is the build folder?
3.6
What is newton-rapshon-strings_en.json?
3.7
What is newton-raphson_en.html?
3.8
What is the package.json?
4
Developing your own simulations
4.1
Making your brand
4.2
Adding your logo and startup image
4.2.1
Startup Image
4.2.2
Logo
4.3
Starting a new simulation
4.4
Navigating through your new simulation
4.4.1
Directory Structure
4.4.2
Accessing your simulation
4.5
Using and changing constants
4.5.1
Background Color
4.5.2
Defining your own Constants
4.6
Strategy for development
4.6.1
Planning
4.6.2
Developing
4.6.3
Testing
4.6.4
Deployment
5
Developing Newton-Raphson Method Simulation
5.0.1
The Input Panel
5.0.2
The Graph Panel
5.0.3
The Results Panel
5.1
Developing backend files
5.2
Developing the Model files
5.2.1
Graph.js
5.2.2
Code for Graph.js
5.2.3
NewtonRaphsonModel.js
5.2.4
Code for NewtonRaphsonModel.js
5.3
Developing supporting view component
5.3.1
Constructing the equation
5.3.2
Adding the equation child
5.3.3
Functions
5.3.4
Code
5.4
Developing the Inputs Panel
5.4.1
Imports
5.4.2
Constants
5.4.3
EquationNode
5.4.4
Panel
5.4.5
Slider
5.4.6
Radio button group
5.4.7
Assembly
5.4.8
Layout
5.4.9
Property.link()
5.4.10
Code
5.5
Developing the Graph Panel
5.5.1
Imports
5.5.2
Functions
5.5.3
Graph Constraints
5.5.4
Axis and Ticks
5.5.5
LinePlot
5.5.6
ScatterPlot
5.5.7
Property.link()
5.5.8
Updating the graph
5.5.9
Code
5.6
Developing the Results Panel
5.6.1
Imports
5.6.2
Extending AccordionBox
5.6.3
Designing a layout
5.6.4
Creating Text and Equation Panels
5.6.5
Updating the Results
5.6.6
Property.link()
5.6.7
Layout
5.6.8
Code
5.7
Working with ScreenView to put all the components together
5.7.1
Code
5.8
Changes to package.json for successful build
5.8.1
Code
5.9
Adding script tags to include js files
6
Developing common features
6.1
Buttons
6.1.1
Imports
6.1.2
Creating the button
7
Developing your own Library
7.1
Prerequisites
7.2
Setting up the directories
7.3
Including your funtions
7.4
Building your library
8
Deploying your simulation on the internet
8.1
Compiling the code and developing a build file
8.2
Embedding a Simulation in an iframe
Published with bookdown
HNM Simulation Documentation
7.1
Prerequisites
Note
Make sure you have
npm
installed on your machine.