Interactive Visual Interpreter is meant to help beginner CS students understand their code better. The student enters code in the "Editor" and sees an abstract visual representation in the "Visualizer", while code results are logged to the "Console". The "Navbar" and "Step" button provide a way to walk through your code more slowly - like a debugger.
Our project requires git, npm&node. Node should be version 8, NPM version 5. It will be easier on a unix-like system. For Windows we recomend using git bash.
To view our prototype, clone and enter the following repo:
git clone git@github.com:project-ivi/ivi.git
cd ivi
Install the dependencies:
npm install
Now build IVI
npm run build
IVI is now built.
npm start will run the dev server and open your browser.
To lint your code use npm run lint. This will report attempt to fix any issues (such as improper indentation) and report any non-fixable errors. Use npm run lint-w to watch code for linting errors. Using watch option will re-lint on any save.
Code input must be Javascript
Currently IVI is basic but is quickly expanding We support the types: -Number -String -Boolean -undefined -NaN
We support:
- Chained statements ex:
a=b=c=4;,console.log(console.log(console.log('test'))); - Variable declaration
- Variable Assignment
- Assigning to other variable's values
- Printing to console
- Comments in Code
- Addition
- Subtraction
- Multiplication
- Division
- Modulo
- Scoping through plain braces
- Multiline statements
- Conditional statements (ex: if, else if, else) as well as nesting statements
- Simple comparators (ex: < and >)
- In order to use conditionals you must make a variable that holds a boolean value. You can have your conditional statement set to the variable and then that variable ONLY will be put in the parenthesis for the conditional. For example:
var a = 5 < 3;
var b = 6 > 7;
var c = false;
if (a) {
} else if (b) {
} else if (c) {
} else {
}
- Order of operations is not yet supported. Evaluation will happen right to left which makes some complex math operations unsupported.
- Using
NaNorunsupportedas variable names. - Order of operations, the program will recurse to the end of the line then pass values up backwards
- Some console log edge cases ex:
console.log(1 + 2 + 'hello');will log 12hello because we promote everything to a string first since we are passing values up from the end - Adding with negative number, we allow subtraction but adding negative numbers not supported
- Looping
- Comparators such as
&& || >= <= == ===any comparator more than one charactor is not supported - Multi - character arithmetic operations
+= *= - Bit Shifting
- Functions
- Everything else not listed in 'Supported'