Create a Calculator that Saves the Results to a Variable

So you want a calculator to practice some math, but want to capture the results when the calculator is used so you can use them somewhere else in the course. 

To create this example, we used the calculator from: https://www.geeksforgeeks.org/javascript/javascript-calculator/. You of course can modify this or use your own. 

Once we had this example, we added a few lines of code so that when the user selected = to perform the calculation, those results were saved in a project variable called calculation.

Steps:

1. Open your project.
2. From the Home Tab, select Manage Variables
3. Select + Add Project Variable.
4. In this case, we used the name of calculation. If you want to use a different variable name, please adjust the HTML code widget to match.
   1. Set the variable type to number
   2. Add an appropriate description
   3. Select Ok

Now you have your project variable. You can choose to display it or use it anywhere you want in your project

The key items you need to take into account when setting the variable are:

1. Make sure you first create the variable in your project (as we did above).
2. Identify which is the variable in your JavaScript code is setting the "results". In this case, it was a bit easier as it was "result"
3. Determine where in the JavaScript code you should add the dominKnow set variable code. This can be tricky at times, so you will need to understand where the source variable is being set. If you are unsure, phone a friend - like ChatGPT!
4. Put in the correct code command to set the variable. The snippet below sets the source variable to a new variable. This isn't 100% needed, but it can make for cleaner code. The second command says if there is a value, then set this new value to the project variable calculation. Again, the check to make sure there is a value isn't 100% needed, but it does make it cleaner and prevents some potential false settings of the variable.

// SET YOUR VARIABLE HERE
        let calculationValue = result;

// PUSH TO CONTENT API
        if (parent?.contentApi?.setData) {
            parent.contentApi.setData('calculation', calculationValue);
        }

Steps

1. Take the provided code and save it in a plain text file with the extension .html.
2. Zip the file.
3. In dominKnow | ONE, under the Engage Tab, select the last button, HTML widget.
4. Select Upload.
5. Select the desired location (typically Current Project), and select Next
6. Select HTML Widgets.
7. Locate the zipped file on your computer and select it.
8. Add the appropriate metadata and select Save.
9. Select the HTML Widget and select Insert.

This will enable you to add it to your page.

    


    

        
        

            C
            /
            *
            -

            7
            8
            9
            +

            4
            5
            6
            =

            1
            2
            3
            0