diff --git a/docs/code-states-visualizer-guide.md b/docs/code-states-visualizer-guide.md
new file mode 100644
index 00000000..8510f39a
--- /dev/null
+++ b/docs/code-states-visualizer-guide.md
@@ -0,0 +1,33 @@
+# Code States Visualizer guide
+
+## Adding a Code States Visualizer in a markdown-file
+
+Simply write the tag ``
+
+Note, that since the input json contains double quotes, we recommend using single quotes around the input. This way there's no need to escape any double quotes in the input json. For this reason, we also recommend using double quotes in your python example code, because otherwise you need to escape every single quote in the input you generate.
+
+Here's an example of a Code States Visualizer in a markdown-file:
+
+
+
+## How to generate the input json
+
+1. Go over to http://www.pythontutor.com/
+2. Click the link labeled "Visualize your code and get live help now"
+
+
+
+3. Select Python 3.6 from the dropdown menu.
+4. Write your example code in the field below the dropdown menu. **Note** that if your code contains quotes, we recommend using double quotes. If you use single quotes, you need to escape all of them in the json when adding the input to Code State Visualizer's markdown.
+5. Open your browser's Network Monitor.
+6. Click the button "Visualize execution" below the field where you wrote your code.
+
+
+
+7. Select the request with the domain "www.pythontutor.com".
+8. Go to the request's Response-tab.
+9. Right click the json and select copy all.
+
+
+
+10. Paste the json to the input-part of the tag `code-states-visualizer input=''>` in your markdown-file.
diff --git a/docs/images/code-states-visualizer/markdown.png b/docs/images/code-states-visualizer/markdown.png
new file mode 100644
index 00000000..a10d7c94
Binary files /dev/null and b/docs/images/code-states-visualizer/markdown.png differ
diff --git a/docs/images/code-states-visualizer/network-monitor.png b/docs/images/code-states-visualizer/network-monitor.png
new file mode 100644
index 00000000..e02f0f16
Binary files /dev/null and b/docs/images/code-states-visualizer/network-monitor.png differ
diff --git a/docs/images/code-states-visualizer/pythontutor-editor.png b/docs/images/code-states-visualizer/pythontutor-editor.png
new file mode 100644
index 00000000..cfdbc7b9
Binary files /dev/null and b/docs/images/code-states-visualizer/pythontutor-editor.png differ
diff --git a/docs/images/code-states-visualizer/pythontutor-frontpage.png b/docs/images/code-states-visualizer/pythontutor-frontpage.png
new file mode 100644
index 00000000..cc212133
Binary files /dev/null and b/docs/images/code-states-visualizer/pythontutor-frontpage.png differ
diff --git a/package-lock.json b/package-lock.json
index 69958707..3cb2c9e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10765,9 +10765,9 @@
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
},
"code-states-visualizer": {
- "version": "0.1.1",
- "resolved": "https://registry.npmjs.org/code-states-visualizer/-/code-states-visualizer-0.1.1.tgz",
- "integrity": "sha512-f21HRBu+/moTqWEnyul2monUabODVt/w7gaIgOnX7eW/eV2Td3kevUrbLoksM3ME7HzkOReD+66Zg3BN9SgEHg==",
+ "version": "0.2.0",
+ "resolved": "https://registry.npmjs.org/code-states-visualizer/-/code-states-visualizer-0.2.0.tgz",
+ "integrity": "sha512-pu0wrSzZW72g5XuTp1yaadzKG6E9sGbxl7kxuPnUkXAYRYoOHnrOPmzq7oPZmzZLkzRD+rVFewP0V/OIzIMFBQ==",
"requires": {
"axios": "^0.16.1",
"babel-polyfill": "^6.23.0",
@@ -10794,18 +10794,13 @@
"is-buffer": "^1.1.5"
}
},
- "is-buffer": {
- "version": "1.1.6",
- "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
- "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
- },
"react-redux": {
- "version": "5.1.1",
- "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.1.1.tgz",
- "integrity": "sha512-LE7Ned+cv5qe7tMV5BPYkGQ5Lpg8gzgItK07c67yHvJ8t0iaD9kPFPAli/mYkiyJYrs2pJgExR2ZgsGqlrOApg==",
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.1.2.tgz",
+ "integrity": "sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==",
"requires": {
"@babel/runtime": "^7.1.2",
- "hoist-non-react-statics": "^3.1.0",
+ "hoist-non-react-statics": "^3.3.0",
"invariant": "^2.2.4",
"loose-envify": "^1.1.0",
"prop-types": "^15.6.1",
@@ -10830,26 +10825,24 @@
"integrity": "sha512-LOWLZAZX1JBIAJ/iWz2aE3RVNCMr5wFi6NmzfAJaOdVwzhLIPyICgFtu9I4tOLGwY7wsZC0Xyf9sqkiP73Cbww==",
"requires": {
"uuid": "^3.1.0"
- },
- "dependencies": {
- "uuid": {
- "version": "3.4.0",
- "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
- "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
- }
}
},
"store": {
"version": "1.3.20",
"resolved": "https://registry.npmjs.org/store/-/store-1.3.20.tgz",
"integrity": "sha1-E+p+P7LWwjmGgmXWhrHYTpnFvj4="
+ },
+ "uuid": {
+ "version": "3.4.0",
+ "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+ "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A=="
}
}
},
"codemirror": {
- "version": "5.48.0",
- "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.48.0.tgz",
- "integrity": "sha512-3Ter+tYtRlTNtxtYdYNPxGxBL/b3cMcvPdPm70gvmcOO2Rauv/fUEewWa0tT596Hosv6ea2mtpx28OXBy1mQCg=="
+ "version": "5.54.0",
+ "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.54.0.tgz",
+ "integrity": "sha512-Pgf3surv4zvw+KaW3doUU7pGjF0BPU8/sj7eglWJjzni46U/DDW8pu3nZY0QgQKUcICDXRkq8jZmq0y6KhxM3Q=="
},
"collapse-white-space": {
"version": "1.0.5",
@@ -11504,9 +11497,9 @@
"integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
},
"css-animation": {
- "version": "1.5.0",
- "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.5.0.tgz",
- "integrity": "sha512-hWYoWiOZ7Vr20etzLh3kpWgtC454tW5vn4I6rLANDgpzNSkO7UfOqyCEeaoBSG9CYWQpRkFWTWbWW8o3uZrNLw==",
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.6.1.tgz",
+ "integrity": "sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==",
"requires": {
"babel-runtime": "6.x",
"component-classes": "^1.2.5"
@@ -12505,9 +12498,9 @@
}
},
"dom-align": {
- "version": "1.9.0",
- "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.9.0.tgz",
- "integrity": "sha512-HvPfXISxoU7dKrbqS4vIFa1hx88wD7VdKaZ7sHWeow8y76tuzsxXkiPGbeilemLXrTd9cWbPqR4MOl4y3dkcXA=="
+ "version": "1.12.0",
+ "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz",
+ "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA=="
},
"dom-classlist": {
"version": "1.0.1",
@@ -22153,11 +22146,6 @@
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.15.tgz",
"integrity": "sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ=="
},
- "lodash._getnative": {
- "version": "3.9.1",
- "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
- "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
- },
"lodash.clonedeep": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -22183,16 +22171,6 @@
"resolved": "https://registry.npmjs.org/lodash.foreach/-/lodash.foreach-4.5.0.tgz",
"integrity": "sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM="
},
- "lodash.isarguments": {
- "version": "3.1.0",
- "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
- "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
- },
- "lodash.isarray": {
- "version": "3.0.4",
- "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
- "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
- },
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -22203,16 +22181,6 @@
"resolved": "https://registry.npmjs.org/lodash.iteratee/-/lodash.iteratee-4.7.0.tgz",
"integrity": "sha1-vkF32yiajMw8CZDx2ya1si/BVUw="
},
- "lodash.keys": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
- "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
- "requires": {
- "lodash._getnative": "^3.0.0",
- "lodash.isarguments": "^3.0.0",
- "lodash.isarray": "^3.0.0"
- }
- },
"lodash.map": {
"version": "4.6.0",
"resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
@@ -23946,9 +23914,9 @@
}
},
"core-js": {
- "version": "2.6.9",
- "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
- "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
+ "version": "2.6.11",
+ "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+ "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
},
"regenerator-runtime": {
"version": "0.10.5",
@@ -25910,30 +25878,31 @@
}
},
"rc-animate": {
- "version": "2.9.1",
- "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.9.1.tgz",
- "integrity": "sha512-QTLxb0vAAR7BTwIXQTZGLjtvU8yHjUFhMe1arrFAQMd4/dAKaDzFeXfoYVcn14w518QyczRT+XBCfZbJNV5wvQ==",
+ "version": "2.11.1",
+ "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.11.1.tgz",
+ "integrity": "sha512-1NyuCGFJG/0Y+9RKh5y/i/AalUCA51opyyS/jO2seELpgymZm2u9QV3xwODwEuzkmeQ1BDPxMLmYLcTJedPlkQ==",
"requires": {
"babel-runtime": "6.x",
"classnames": "^2.2.6",
"css-animation": "^1.3.2",
"prop-types": "15.x",
"raf": "^3.4.0",
- "rc-util": "^4.8.0",
+ "rc-util": "^4.15.3",
"react-lifecycles-compat": "^3.0.4"
}
},
"rc-slider": {
- "version": "8.6.13",
- "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.6.13.tgz",
- "integrity": "sha512-fCUe8pPn8n9pq1ARX44nN2nzJoATtna4x/PdskUrxIvZXN8ja7HuceN/hq6kokZjo3FBD2B1yMZvZh6oi68l6Q==",
+ "version": "8.7.1",
+ "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.7.1.tgz",
+ "integrity": "sha512-WMT5mRFUEcrLWwTxsyS8jYmlaMsTVCZIGENLikHsNv+tE8ThU2lCoPfi/xFNUfJFNFSBFP3MwPez9ZsJmNp13g==",
"requires": {
"babel-runtime": "6.x",
"classnames": "^2.2.5",
"prop-types": "^15.5.4",
"rc-tooltip": "^3.7.0",
"rc-util": "^4.0.4",
- "shallowequal": "^1.0.1",
+ "react-lifecycles-compat": "^3.0.4",
+ "shallowequal": "^1.1.0",
"warning": "^4.0.3"
}
},
@@ -25962,24 +25931,21 @@
}
},
"rc-util": {
- "version": "4.8.1",
- "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.8.1.tgz",
- "integrity": "sha512-siJw/pPunmiQ/YVp/SXNuri3907+GgAmw8TeMVGv9H2LhE/0NlKonuU5CBwPeLQyKdKmJro4EUitEpekwP5osA==",
+ "version": "4.21.1",
+ "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.21.1.tgz",
+ "integrity": "sha512-Z+vlkSQVc1l8O2UjR3WQ+XdWlhj5q9BMQNLk2iOBch75CqPfrJyGtcWMcnhRlNuDu0Ndtt4kLVO8JI8BrABobg==",
"requires": {
"add-dom-event-listener": "^1.1.0",
- "babel-runtime": "6.x",
"prop-types": "^15.5.10",
+ "react-is": "^16.12.0",
"react-lifecycles-compat": "^3.0.4",
- "shallowequal": "^0.2.2"
+ "shallowequal": "^1.1.0"
},
"dependencies": {
- "shallowequal": {
- "version": "0.2.2",
- "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
- "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
- "requires": {
- "lodash.keys": "^3.1.2"
- }
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
}
}
},
diff --git a/package.json b/package.json
index 738a8383..e47b7d35 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
"axios": "^0.19.2",
"babel-plugin-styled-components": "^1.10.7",
"clsx": "^1.1.1",
- "code-states-visualizer": "^0.1.1",
+ "code-states-visualizer": "^0.2.0",
"color": "^3.1.1",
"commonmark": "^0.29.1",
"core-js": "^3.6.5",
diff --git a/src/partials/CodeStatesVisualizer.js b/src/partials/CodeStatesVisualizer.js
index fb882700..c636a738 100644
--- a/src/partials/CodeStatesVisualizer.js
+++ b/src/partials/CodeStatesVisualizer.js
@@ -20,7 +20,7 @@ class CodeStatesVisualizerWrapper extends React.Component {
const { input } = this.props
return (
Loading...}>
-
+
)
}
diff --git a/use-local-code-states-visualizer.sh b/use-local-code-states-visualizer.sh
new file mode 100755
index 00000000..03fd128d
--- /dev/null
+++ b/use-local-code-states-visualizer.sh
@@ -0,0 +1,25 @@
+#!/bin/bash
+
+PATH_TO_PACKAGE=${1:-"../code-states-visualizer"};
+
+
+if [ ! -d "$PATH_TO_PACKAGE" ]; then
+ echo "Given argument '$PATH_TO_PACKAGE' is not a directory"
+ exit 1
+fi
+
+rm -r ./node_modules/code-states-visualizer;
+mkdir ./node_modules/code-states-visualizer;
+
+if [ ! -d "$PATH_TO_PACKAGE/dist" ]; then
+ PATH_TO_THIS=$PWD
+ cd "$PATH_TO_PACKAGE" || exit 1
+ yarn install
+ cd "$PATH_TO_THIS" || exit 1
+fi
+
+cp -r "$PATH_TO_PACKAGE/dist" node_modules/code-states-visualizer/dist;
+cp "$PATH_TO_PACKAGE/package.json" node_modules/code-states-visualizer/package.json;
+cd node_modules/code-states-visualizer || exit 1;
+# npm install --prod;
+cd ../..;
diff --git a/use-local-quizzes.sh b/use-local-quizzes.sh
new file mode 100755
index 00000000..a7992c58
--- /dev/null
+++ b/use-local-quizzes.sh
@@ -0,0 +1,25 @@
+#!/bin/bash
+
+PATH_TO_PACKAGE=${1:-"../quizzes/packages/moocfi-quizzes"};
+
+
+if [ ! -d "$PATH_TO_PACKAGE" ]; then
+ echo "Given argument '$PATH_TO_PACKAGE' is not a directory"
+ exit -1
+fi
+
+rm -r ./node_modules/moocfi-quizzes;
+mkdir ./node_modules/moocfi-quizzes;
+
+if [ ! -d "$PATH_TO_PACKAGE/dist" ]; then
+ PATH_TO_THIS=$PWD
+ cd $PATH_TO_PACKAGE
+ yarn install
+ cd $PATH_TO_THIS
+fi
+
+cp -r $PATH_TO_PACKAGE/dist node_modules/moocfi-quizzes/dist;
+cp $PATH_TO_PACKAGE/package.json node_modules/moocfi-quizzes/package.json;
+cd node_modules/moocfi-quizzes;
+npm install --prod;
+cd ../..;