Storyteller Demo Playback

Mark Mahoney

This is a brief demo of a tool that I created called Storyteller. It works with a popular code editor so that programmers can give readers a detailed explanation of their code.

Playbacks allow a viewer to see how some code has evolved and to hear a narrative from the author about it. It turns out that this demo is also a playback. So, click on the comment underneath this one to learn more.

This is a comment. Viewers click on these to move through a playback. Clicking on these comments drive the playback.

Before I get to the code let me explain how to install Storyteller. In order to create your own playbacks you need to use the popular code editor Visual Studio Code and the Storyteller extension. However, if you are just viewing playbacks (like you are doing right now) then all you need is a web browser.

Click on the video below for more information. When you are done click on the comment below this one.

In the following video I explain how to use Visual Studio Code along with the Storyteller extension to record a development session. Click on the video below.

In this final video I discuss how to view a playback.

Once you are ready to share a playback you can create a zip file with all of the files (html/css/javascript) needed to view a playback in the browser.

Just unzip the file and then share and serve the directory on your own personal web server, LMS, or on GitHub.

Now that you have heard me discuss Storyteller playbacks you can explore them a bit. There are controls at the bottom of the screen to move through a playback. Try them out now.

One can change the size of the code using the 'Options Menu' and switch back and forth between 'Code Mode' and 'Blog Mode' using the controls in the top right corner.

The rest of this playback holds the code from the videos. Click on the comments below this one to be taken through the code.

This program shows how to sum the numbers from 1 up to a specified value.

This is a standard C++ driver program.

/main.cpp

1
2
3
4
5
6
7
8
#include <iostream>
using namespace std;
int main()
{
    return 0;
}
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
[object Object]

This test is for positive numbers. If a non-positive is passed in to the function then it prints an error message.

/main.cpp

12
13
14
15
16
17
18
19
20
21
22
23
24
int sumOfNumbers(int upTo)
{
    int retVal = 0;
    if(upTo >= 1)
    {
    }
    else
    {
        cout<<"The number must be positive."<<endl;
    }
}
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
[object Object]

This loops through and adds each of the numbers together.

/main.cpp

17
18
19
20
21
22
23
24
25
26
27
    if(upTo >= 1)
    {
        for(int i = 1;i <= upTo;i++)
        {
            retVal = retVal + i;
        }
    }
    else
    {
        cout<<"The number must be positive."<<endl;
    }
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
[object Object]

This tests the first approach.

/main.cpp

7
8
9
10
11
int main()
{
    cout<<"The sum of the numbers from 1-10 is "<<sumOfNumbers(10)<<endl;
    return 0;
}
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
[object Object]

This is a more efficient algorithm.

/main.cpp

18
19
20
21
22
23
24
25
    if(upTo >= 1)
    {
        retVal = (upTo * (upTo + 1)) / 2;
    }
    else
    {
        cout<<"The number must be positive."<<endl;
    }
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
[object Object]

Storyteller:

Images

Videos

Audios