1. Open a Desmos link from the textbook.
- Open the Google Doc to see if anyone else has already completed this task.
- Be sure you record your work in the Google Doc at the end of the procedure.
- All code needs to be saved in the appropriate folder in Dropbox.
2. Open the Javascript Console (This process varies from browser to browser)
3. Copy this line into the console and hit enter:
JSON.stringify(Calc.getState())
4. You will see a large amount of output to the console. This could be hundreds of lines depending on the graph.
- Select and copy everything BETWEEN the first and last double quote.
- DO NOT INCLUDE the beginning and ending double quote!
5. Copy into any text editor, such as Notepad or TextEdit. Select the whole text in the editor.
Don't forget to delete the quote (") at the beginning and at the end.
6. Find-and-replace all backslashes ( \ ) with double-backslashes ( \\ ).
Usually, control "f" or command "f" will bring up the Find and Replace menu. This may be different for your text editor.
7. Find-and-replace all single quotes ( ' ) with backslash single quotes ( \' ).
There may not be any found.
8. Create a new HTML file with your preferred HTML editor. Notepad will also work.
- PC people may want to use Notepad.
- Mac people may want to use TextWrangler or Dreamweaver.
9. Copy this code into the file:
<!DOCTYPE html>
<html>
<head>
<title>Desmos Embedding Test</title>
<script src="https://www.desmos.com/api/v0.3/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
</head>
<body>
<div id="calculator" style="width: 800px; height: 600px;"></div>
<script>
var elt = document.getElementById('calculator');
var calculator = Desmos.Calculator(elt);
calculator.setState(JSON.parse('/* REPLACE THIS WITH THE SAVED CALCULATOR CODE */'));
</script>
</body>
</html>
10. Replace this part: /* REPLACE THIS WITH THE SAVED CALCULATOR CODE */
- Replace with the code you've modified in your text editor.
- Save the HTML file.
- If you get an error on line 15, you may have had an image in the Desmos. It will not work.
11. Test it in your browser.
- Change the background color in the Google Doc to green.
- Note any problems with the tool such as images not loading or sliders not working in the Google Doc.
- Save the text in the appropriate place in Dropbox.