Skip to content

recursion demo draft #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

recursion demo draft #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/recursion.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 31 additions & 12 deletions nested-for-loops-demo/style.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

125 changes: 125 additions & 0 deletions recursion-demo/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `<!-- TODO: Change the name of the demo here -->` 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
<script src="../assets/codejar.js"></script>
<script src="../assets/linenumbers.js"></script>
<script src="../assets/prism.js"></script>
```

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
<link rel="stylesheet" href="../assets/prism.css">
```

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
<div class="editor-section section">
<div class="editor lang-html" id="editor"></div>
</div>
```

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
141 changes: 141 additions & 0 deletions recursion-demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html>
<head>
<!-- TODO: Change the title of the page to your demo name -->
<title>Recursion Demo | Bit by Bit</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="https://bitbybitcoding.org/imgs/favicon.svg">
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7f9874946f.js" crossorigin="anonymous"></script>
<script>
function checkAnswers(){
input_answer = document.querySelector('[name="answer"]').value
correct_answer = 29

if (input_answer.length == 0) {
alert("Please type your answer. ");
return false;
}

if (input_answer == correct_answer) {
alert("That is correct! ");
}
else {
alert("Oops, be careful with your calculations! ");
}

}
</script>
</head>
<body>
<div id="header" class="flex-container-header">
<div class="flex-item-header flex-container-left">
<div class="flex-item-left">
<a href="/" style="margin-right: 1em;">
<button id="back-button" title="Back to all demos">
<i class="fas fa-arrow-left"></i>
</button>
</a>
</div>
<!-- TODO: Change the name of the demo here -->
<h1 class="flex-item-left">RECURSION DEMO</h1>
</div>
<div class="flex-item-header">
<img id="bxb-logo" src="https://bitbybitcoding.org/imgs/Logos%20and%20Icons/Logo.svg" alt="Logo">
</div>
</div>
<div class="content">
<!-- TODO: Fill this content div with all the content of the demo -->
<div class="section">
<h2>Introduction</h2>
<p>
The process of a function calling itself is called recursion, and this function is called a recursive function. By using recursion, we can solve certain type of tasks easily.
</p>
<p>
You may ask, if a function calls itself, it will lead to calling itself again, and again, and again... when would it stop? This is why it is always important to add a stop condition for recursive functions,
which is called the base case of the recursion.
</p>
</div>
<div class="flex-box">
<div class="flex-col section">
<h2>Example</h2>
<p>
Let's investigate an interesting topic! How do bit by bots "reproduce"? Well, a newly created bit by bot need to learn how to create new bit by bots for a month;
after that, the bit by bot will create a new bit by bot every month. If we start with one single newly created bit by bot, as shown in the picture below,
it takes the bit by bot one month to learn how to create a new bit by bot and it will be creating one new bit by bot every month.
Remember, each newly created bit by bot only starts to create new bit by bots after it has spent one month learning the way to do so.
</p>
<p>
In this picture, each row represents the total number of bit by bot of the corresponding month. For each month, each bit by bot that knows how to build bit by bots will
still be in the group in the next month (represented by the black branches) and will make a new bit by bot (represented by the red branches).
</p>
<img src="/assets/recursion.jpg" width="650">
</div>
<div class="flex-col section">
<h2>Analysis of example</h2>
<p>
The number of bit by bots for each month actually follows a pattern. 1, 1, 2, 3, 5, 8, ... Starting from the third term, each term is the sum of the previous two terms.
This is a famous sequence called the Fibonacci sequence. Now, let's write a function that will give us the total number of bit by bots produced in such fashion
for any given month.
</p>
<p>
The function should take a single input, namely the month, and output the total number of bit by bots for that month. (You can pause here briefly and try to write
a function that will work as described without using recursion. ) The code below is the recursive function that completes the task:
</p>
<span class="big-code">
function <span class="identifier">fibonacci(<span class="values">month</span>)</span> {<br>
<span class="comment"> &emsp; // Here the two ifs are the base case for the recursion, as<br>
&emsp; you can see they are not calling the function itself anymore</span><br>
&emsp; if (<span class="values">n == 0</span>)<br>
&emsp; &emsp; return <span class="values">0</span>;<br>
&emsp; if (<span class="values">n == 1 || n == 2</span>)<br>
&emsp; &emsp; return <span class="values">1</span>;<br>
<span class="comment"> &emsp; // This is where recursion occurs, the function is calling itself. <br>
&emsp; It says the output should be the sum of previous two months</span><br>
&emsp; else <br>
&emsp; &emsp; return <span class="identifier">fibonacci(<span class="values">month - 1</span>)</span> + <span class="identifier">fibonacci(<span class="values">month - 2</span>)</span>;<br>
}<br></span>
<p>
One important thing worth noting is how the function is evaluated. The only three cases where the function does not call itself repeatedly are month 0, 1, and 2.
These are our base cases and we set them to 0, 1, and 1 correspondingly. For any larger input, the function will need to call itself.
</p>
<p>
For instance, if our input is 5,
fibonacci(5) will call fibonacci(4) and fibonacci(3); both of fibonacci(4) and fibonacci(3) are not fully evaluated yet, and they go on to call fibonacci(3) and
fibonacci(2), and fibonacci(2) and fibonacci(1). As stated before, fibonacci(2) and fibonacci(1) are just defined numbers, thus fibonacci(3) is determined, and is used to determine
the value of fibonacci(4); with both fibonacci(3) and fibonacci(4) completely evaluated, the value of fibonacci(5) is returned.
</p>
</div>
</div>
<div class="section">
<h2>Quick exercise</h2>
<div class="flex-box">
<div class="flex-col">
<p>
See if you can figure out the console output of the following code, where input n is a positive number. <br>
</p>
<span class="big-code">
function <span class="identifier">exercise(<span class="values">n</span>)</span> {<br>
&emsp; if (<span class="values">n == 1</span>)<br>
&emsp; &emsp; return <span class="values">1</span>;<br>
&emsp; else <br>
&emsp; &emsp; return n + <span class="identifier">exercise(<span class="values">n - 1</span>)</span> + n;<br>
}<br>
console.log(<span class="identifier">exercise(<span class="values">5</span>)</span>);</span>
</div>
<div class="flex-col">
<form action="" name="f1" onsubmit >
your answer = <input type="password" name="answer" size="20">
<br>
<br>
<input type="button" value="Check" onClick="checkAnswers()">
</form>
<img src="/assets/bit-by-bot-images/computer-suspicious-closed-bot.svg" width="200">
</div>
</div>
</div>
<!-- The end of the content div is here -->
</div>
</body>
</html>
Loading