From 6e2e69f404d40d6c815d80a629d3b387a755051b Mon Sep 17 00:00:00 2001
From: BhargavM1 <58884443+BhargavM1@users.noreply.github.com>
Date: Sun, 14 Nov 2021 14:41:37 -0500
Subject: [PATCH 1/7] Started while-loop demo
---
while-loop-demo/README.md | 125 ++++++++++++++++++
while-loop-demo/index.html | 114 +++++++++++++++++
while-loop-demo/script.js | 28 +++++
while-loop-demo/style.css | 252 +++++++++++++++++++++++++++++++++++++
while-loop-demo/style.scss | 72 +++++++++++
5 files changed, 591 insertions(+)
create mode 100644 while-loop-demo/README.md
create mode 100644 while-loop-demo/index.html
create mode 100644 while-loop-demo/script.js
create mode 100644 while-loop-demo/style.css
create mode 100644 while-loop-demo/style.scss
diff --git a/while-loop-demo/README.md b/while-loop-demo/README.md
new file mode 100644
index 0000000..ae5f377
--- /dev/null
+++ b/while-loop-demo/README.md
@@ -0,0 +1,125 @@
+# interactive-tutorials Template Files
+
+This folder is made to show what the start of an interactive tutorial might look like.
+Remember, however, that a lot of creating a tutorial is creative freedom.
+Thus, don't take these as hard fast rules but rather guidelines.
+We want to show a uniform look in all the tutorials and so that's why this template exists.
+With this said, this document will walk you through how to create your own interactive tutorial.
+
+### Jumping In
+
+First, we need to get the back-bone of the tutorial page.
+There is an `index.html` file inside the `template` directory, this is an example of a minimal demo.
+In fact, this demo isn't even functional.
+With no editor, input, or real result, you'll have to add all those yourself.
+To do this we need a `script.js` and some understanding of how each of the common assets work.
+
+Let's start!
+Copy the `template` folder to a new folder in the same root `interactive-demos` directory.
+For our purposes, we'll call this the `test-demo`.
+Then open the `index.html` file.
+Inside you'll find HTML comments with the prefix `TODO:`, these point to places that need replaced.
+For example, the header below the `` comment should be replaced with the name of your demo.
+Inside the `"content"` div there is already a few sections.
+Open the page up to see what this layout produces and read the contents of each section.
+
+### The First Common
+
+There's already styling on the page, but how exactly does it work?
+There's a `style.css` file, but this isn't our css file.
+Another file, `style.scss`, is what we use to modify the styling on the page.
+If you don't already know SASS, quickly read up on it [here][0].
+Then, install it using the instructions [here][1].
+(The best method is just using `npm install -g sass`.)
+
+Notice the top of the `style.scss` file, `@import "../assets/common.scss";`.
+This takes the common SASS file and using its styling and then overwrites them with whatever your styles are.
+The `..` is there because the assets directory is one level up from where the demos are.
+If you use any other assets such as CodeJar, line numbers, or the options files, don't forget this `..` before the path.
+
+### Proper Local Development
+
+So far, we've been viewing the file as the `index.html` file, and sometimes this is fine.
+However, for the best results, we should use a local webserver.
+To do this we will use `serve` on npm.
+Install it using `npm install -g serve`.
+Then run it using `serve` inside the `interactive-demos` directory.
+It's recommended to do this in a new terminal window.
+It should then start hosting a static webserver at `localhost:5000`.
+When making changes to any files be sure to also reload your web view.
+To stop it, press `Ctrl + C`.
+
+### Code Editor
+
+The code editor that the demos use is called CodeJar.
+First, we must add the assets to the html file.
+Add these three script tags to the bottom of the body in the `index.html` file.
+
+```html
+
+
+
+```
+
+The first asset, CodeJar, is the actual code editor.
+We'll add the editor in a moment.
+Next, `linenumbers.js` is an extension to the CodeJar library.
+Finally, Prism is a code highlighting library.
+We also need to add a CSS file to the head for this one to work.
+The link tag should be as follows:
+
+```html
+
+```
+
+Take note that there is a `../assets/` preceeding each filename.
+This is very important for the way the file URL's work.
+
+Let's add an editor to the HTML page now.
+To whichever section you want to make the editor section, add the class `editor-section`.
+Then place another div inside of this section with the class `editor`.
+Best practice is also to give the editor div an ID so that it identifiable from the script.
+For the code highlighting to work, also add a language class to the editor.
+This should be something like `"lang-html"` or `"lang-js"`.
+The final result should look something like this:
+
+```html
+
+
+
+```
+
+We now add this editor as a CodeJar in the script.
+First, create a `script.js` file and add it to the end of the body, after the other three script tags.
+In this file, we'll create a CodeJar and test the methods of manipulating it.
+First, get the div element with the class `"editor"`, in this case it has an id of `"editor"` as well.
+Then pass this into the `Codejar` class constructor.
+For the basic highlighting use `Prism.highlightElement`; for line numbers wrap this in the `withLineNumbers` function.
+The last argument is for the options of the editor.
+A final Codejar with line numbers and prism highlighting would look something like this.
+
+```js
+let editorElement = document.getElementById("editor");
+let jar = CodeJar(editorElement, withLineNumbers(Prism.highlightElement, {
+ color: '#000',
+ backgroundColor: 'rgb(232, 232, 232)'
+}), {
+ tab: ' ',
+ indentOn: /[\[({]$/
+});
+```
+
+The last options are the tab size/character, and when to auto-indent.
+For JavaScript this can be kept to default, however, for HTML it should be changed to something like `/<[a-zA-Z =\"\-]+>$/`.
+
+There are three methods that are used on this code jar: `updateCode`, `toString`, and `onUpdate`.
+First, `updateCode` takes in a string and sets the code in the editor.
+The method `toString` returns a string containing the code in the editor.
+Finally, `onUpdate` takes a function as the only parameter, which is called any time the code in the editor changes.
+
+Examples of these functions being used include: an execute button that calls `toString` and passes it into the source of an iframe, auto saving 3 seconds after the last code update, and creating an animated code/result display.
+All three of these examples are in the `div-demo/script.js` file.
+
+
+[0]: https://sass-lang.com/guide
+[1]: https://sass-lang.com/install
diff --git a/while-loop-demo/index.html b/while-loop-demo/index.html
new file mode 100644
index 0000000..cfe22f8
--- /dev/null
+++ b/while-loop-demo/index.html
@@ -0,0 +1,114 @@
+
+
+
+ While Loop Demo | Bit by Bit
+
+
+
+
+
+
+
+
+
+ Loops are a way to iterate a piece of code for as long as you want it to be run. While loops are a type of loop that run code as long as the given condition is true.
+ These loops are useful when you want to run code for an unknown number of times, until a condition is no longer true, or while a condition is being met.
+
+ Some uses of while loops include:
+
+
Running code while a button is pressed.
+
Showing an image while it is being hovered over.
+
Moving a character while a button is pressed.
+
Running code while a condition is not met.
+
+
+
+
+
+
+
Example 1
+ Hold down the button to start the timer, and let go to stop the timer. The counter goes up only while the button is pressed. Once you let go of the button, the condition is no longer met, and the counter stops counting. Use the slider to change the interval between increments of the counter.
+
+
+
+ Count Gap:
+
+
+
+ Counter: 0
+
+
+
+
+ //Finds the place where "Counter" is located
+ var countValue = document.getElementById("Counter");
+ //Sets initial count to 0
+ var count = 0;
+
+ //This function is run when the button is pressed
+ function startCount() {
+
+ //As long as the button is held down, the code is run
+ while (buttonPressed) {
+ countValue.innerHTML = Counter + count;
+ count++;
+ }
+ }
+ *Simplified version of code
+
+
+
+
+
+
+
+
Example 2
+ Hover over the space below to view the BxB bots. The images will only show up while the mouse is hovering over them. Once you move your mouse off the images, they will no longer be visible.
+
+
+
+
+
+
+
+
+
+ //Finds the place where the BxB bot is located
+ var botImage = document.getElementById("bot");
+ //Sets initial opacity to 0, making it invisible
+ botImage.style.opacity = "0";
+
+ //This function is run only while the image is being hovered over.
+ function changeVisibility() {
+
+ //While the mouse is hovering over the image, the opacity is changed to 1.
+ while (botImage.hovered === true) {
+ botImage.style.opacity = "1";
+ }
+ }
+ *Simplified version of code
+
botImage.style.opacity = "1";
}
}
- *Simplified version of code
+ *Simplified version of code
+
+
+
Do While Loops
+ Do while loops are a type of while loops. They have the same function as while loops, but they run one time before even checking the condition of the while loop. In other words,
+ it runs the code one time and then checks to see if it should keep running.
+
+ Some uses of do while loops include:
+
+
Asking for a password and rerunning until it is correct.
+
Deciding if the code should be rerun depending on input from do while loop.
+
If a certain piece of code needs to be run at least once, and more times depending on the condition.
+ Try out an application of do while loops below. The purpose of this program is to keep asking for the password until you get it right. It will run the code once to get your first attempt and keep running until you get it right. Hint: The password is "password123".
+
+
+
+
+
+
+ //Sets an empty string to the password variable.
+ var pass = "";
+
+ //This function runs when the button is pressed and it asks for the password.
+ function askPassword() {
+
+ //The code is run once to ask for initial password input..
+ do {
+ pass = prompt("Please enter the password");
+ //This lets the user know if the password is incorrect.
+ if (pass!="password123")
+ alert("Incorrect password");
+ }
+ while(pass!="password123")
+ //Lets the user know the correct password was entered
+ alert("Correct password entered");
+ }
+ *Simplified version of code
+
+
+
diff --git a/while-loop-demo/script.js b/while-loop-demo/script.js
index 4000ce8..631b955 100644
--- a/while-loop-demo/script.js
+++ b/while-loop-demo/script.js
@@ -26,3 +26,15 @@ function e1onchange(x) {
e1SliderValue = x;
}
+
+function e3() {
+var pass = "";
+ do {
+ pass = prompt("Please enter the password");
+ if (pass!="password123")
+ alert("Incorrect password");
+ }
+ while(pass!="password123")
+
+ alert("Correct password entered");
+}
\ No newline at end of file
diff --git a/while-loop-demo/style.css b/while-loop-demo/style.css
index 512769f..10bf0fe 100644
--- a/while-loop-demo/style.css
+++ b/while-loop-demo/style.css
@@ -235,6 +235,7 @@ button:active {
.code {
color: #f19100;
+ font-family: 'Anonymous Pro', monospace;
}
.bot {
diff --git a/while-loop-demo/style.scss b/while-loop-demo/style.scss
index c94d97a..68e7cda 100644
--- a/while-loop-demo/style.scss
+++ b/while-loop-demo/style.scss
@@ -57,6 +57,7 @@
}
.code {
color: #f19100;
+ font-family: 'Anonymous Pro', monospace;
}
.bot {
From d9a291aece7838aaa749cf225038a16b068380a1 Mon Sep 17 00:00:00 2001
From: BhargavM1 <58884443+BhargavM1@users.noreply.github.com>
Date: Wed, 17 Nov 2021 22:33:45 -0500
Subject: [PATCH 4/7] Update script.js
---
script.js | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/script.js b/script.js
index 2e5f581..8f2c63f 100644
--- a/script.js
+++ b/script.js
@@ -55,6 +55,11 @@ let interactiveTutorials = {
path: 'truthy-falsy-demo',
title: 'TRUTHY AND FALSY VALUES DEMO',
content: "What are truthy and falsy values in JavaScript? What expressions evaluate to boolean false?"
+ },
+ whileLoopDemo: {
+ path: 'while-loop-demo',
+ title: 'WHILE LOOP DEMO',
+ content: "What are while loops and do while loops?"
}
};
From d97abb8b8e4767e9961c58a16ac993b614c19a41 Mon Sep 17 00:00:00 2001
From: BhargavM1 <58884443+BhargavM1@users.noreply.github.com>
Date: Sun, 21 Nov 2021 22:13:44 -0500
Subject: [PATCH 5/7] started animations demo
---
animations-demo/README.md | 125 +++++++++++++++++++++++
animations-demo/index.html | 76 ++++++++++++++
animations-demo/script.js | 4 +
animations-demo/style.css | 200 +++++++++++++++++++++++++++++++++++++
animations-demo/style.scss | 21 ++++
5 files changed, 426 insertions(+)
create mode 100644 animations-demo/README.md
create mode 100644 animations-demo/index.html
create mode 100644 animations-demo/script.js
create mode 100644 animations-demo/style.css
create mode 100644 animations-demo/style.scss
diff --git a/animations-demo/README.md b/animations-demo/README.md
new file mode 100644
index 0000000..ae5f377
--- /dev/null
+++ b/animations-demo/README.md
@@ -0,0 +1,125 @@
+# interactive-tutorials Template Files
+
+This folder is made to show what the start of an interactive tutorial might look like.
+Remember, however, that a lot of creating a tutorial is creative freedom.
+Thus, don't take these as hard fast rules but rather guidelines.
+We want to show a uniform look in all the tutorials and so that's why this template exists.
+With this said, this document will walk you through how to create your own interactive tutorial.
+
+### Jumping In
+
+First, we need to get the back-bone of the tutorial page.
+There is an `index.html` file inside the `template` directory, this is an example of a minimal demo.
+In fact, this demo isn't even functional.
+With no editor, input, or real result, you'll have to add all those yourself.
+To do this we need a `script.js` and some understanding of how each of the common assets work.
+
+Let's start!
+Copy the `template` folder to a new folder in the same root `interactive-demos` directory.
+For our purposes, we'll call this the `test-demo`.
+Then open the `index.html` file.
+Inside you'll find HTML comments with the prefix `TODO:`, these point to places that need replaced.
+For example, the header below the `` comment should be replaced with the name of your demo.
+Inside the `"content"` div there is already a few sections.
+Open the page up to see what this layout produces and read the contents of each section.
+
+### The First Common
+
+There's already styling on the page, but how exactly does it work?
+There's a `style.css` file, but this isn't our css file.
+Another file, `style.scss`, is what we use to modify the styling on the page.
+If you don't already know SASS, quickly read up on it [here][0].
+Then, install it using the instructions [here][1].
+(The best method is just using `npm install -g sass`.)
+
+Notice the top of the `style.scss` file, `@import "../assets/common.scss";`.
+This takes the common SASS file and using its styling and then overwrites them with whatever your styles are.
+The `..` is there because the assets directory is one level up from where the demos are.
+If you use any other assets such as CodeJar, line numbers, or the options files, don't forget this `..` before the path.
+
+### Proper Local Development
+
+So far, we've been viewing the file as the `index.html` file, and sometimes this is fine.
+However, for the best results, we should use a local webserver.
+To do this we will use `serve` on npm.
+Install it using `npm install -g serve`.
+Then run it using `serve` inside the `interactive-demos` directory.
+It's recommended to do this in a new terminal window.
+It should then start hosting a static webserver at `localhost:5000`.
+When making changes to any files be sure to also reload your web view.
+To stop it, press `Ctrl + C`.
+
+### Code Editor
+
+The code editor that the demos use is called CodeJar.
+First, we must add the assets to the html file.
+Add these three script tags to the bottom of the body in the `index.html` file.
+
+```html
+
+
+
+```
+
+The first asset, CodeJar, is the actual code editor.
+We'll add the editor in a moment.
+Next, `linenumbers.js` is an extension to the CodeJar library.
+Finally, Prism is a code highlighting library.
+We also need to add a CSS file to the head for this one to work.
+The link tag should be as follows:
+
+```html
+
+```
+
+Take note that there is a `../assets/` preceeding each filename.
+This is very important for the way the file URL's work.
+
+Let's add an editor to the HTML page now.
+To whichever section you want to make the editor section, add the class `editor-section`.
+Then place another div inside of this section with the class `editor`.
+Best practice is also to give the editor div an ID so that it identifiable from the script.
+For the code highlighting to work, also add a language class to the editor.
+This should be something like `"lang-html"` or `"lang-js"`.
+The final result should look something like this:
+
+```html
+
+
+
+```
+
+We now add this editor as a CodeJar in the script.
+First, create a `script.js` file and add it to the end of the body, after the other three script tags.
+In this file, we'll create a CodeJar and test the methods of manipulating it.
+First, get the div element with the class `"editor"`, in this case it has an id of `"editor"` as well.
+Then pass this into the `Codejar` class constructor.
+For the basic highlighting use `Prism.highlightElement`; for line numbers wrap this in the `withLineNumbers` function.
+The last argument is for the options of the editor.
+A final Codejar with line numbers and prism highlighting would look something like this.
+
+```js
+let editorElement = document.getElementById("editor");
+let jar = CodeJar(editorElement, withLineNumbers(Prism.highlightElement, {
+ color: '#000',
+ backgroundColor: 'rgb(232, 232, 232)'
+}), {
+ tab: ' ',
+ indentOn: /[\[({]$/
+});
+```
+
+The last options are the tab size/character, and when to auto-indent.
+For JavaScript this can be kept to default, however, for HTML it should be changed to something like `/<[a-zA-Z =\"\-]+>$/`.
+
+There are three methods that are used on this code jar: `updateCode`, `toString`, and `onUpdate`.
+First, `updateCode` takes in a string and sets the code in the editor.
+The method `toString` returns a string containing the code in the editor.
+Finally, `onUpdate` takes a function as the only parameter, which is called any time the code in the editor changes.
+
+Examples of these functions being used include: an execute button that calls `toString` and passes it into the source of an iframe, auto saving 3 seconds after the last code update, and creating an animated code/result display.
+All three of these examples are in the `div-demo/script.js` file.
+
+
+[0]: https://sass-lang.com/guide
+[1]: https://sass-lang.com/install
diff --git a/animations-demo/index.html b/animations-demo/index.html
new file mode 100644
index 0000000..0731f88
--- /dev/null
+++ b/animations-demo/index.html
@@ -0,0 +1,76 @@
+
+
++
+ Animations Demo | Bit by Bit
+
+
+
+
+
+
+
+ Animations are used in many T.V. shows and cartoons, and they can also be programmed in JavaScript. All you have to do is write a function, to perform a movement or change in color/shape
+ and call that function with an object.
+
+ You can use animations to perform any of these:
+
+
Changing the color over a period of time.
+
Changing the position of an object.
+
Merging or seperating two objects.
+
+
+
+
+
+
+
Example 1
+ Press the button below and watch the BxB bot move from one side to the oher. The button is linked to a function that animates the bot to move from one side to the other.
+
+
+
+
+
+ //Finds the place where "Counter" is located
+ var countValue = document.getElementById("Counter");
+ //Sets initial count to 0
+ var count = 0;
+
+ //This function is run when the button is pressed
+ function startCount() {
+
+ //As long as the button is held down, the code is run
+ while (buttonPressed) {
+ countValue.innerHTML = Counter + count;
+ count++;
+ }
+ }
+ *Simplified version of code
+
+ 
+ 
+ 
+ 
+ 
+ 
+