An Overview of Runestone Interactive¶

Embedded Videos¶

Our toolset provides a number of different things that will help you to learn to program in the Python programming language. Aside from reading the text, it is sometimes useful to hear someone tell you about different aspects of the topic being discussed. In order to accomplish this, we provide a way to integrate simple, short videos into the text. For example, if you click on the video shown below, you will hear us talk about the tools that will be described shortly.

YouTube¶

ActiveCode Windows¶

One of the most important things that you can do when you are learning a programming language is to write programs. Unfortunately, typical textbooks allow you to read about programming but don’t allow you to practice. We have created a unique tool called activecode that allows you to write, modify, and execute programs right in the text itself (right from the web browser). Although this is certainly not the way real programs are written, it provides an excellent environment for learning a programming language like Python since you can experiment with the language as you are reading.

Take a look at the activecode interpreter in action. If we take a simple Python program and make it active, you will see that it can be executed directly by pressing the run button. Try pressing the run button below.

Now try modifying the activecode program shown above. First, modify the string in the first print statement by changing the word adds to the word multiplies. Now press run. You can see that the result of the program has changed. However, it still prints “5” as the answer. Modify the second print statement by changing the addition symbol, the “+”, to the multiplication symbol, “*”. Press run to see the new results. You can do this as many times as you like. You can even start completely over by simply deleting all the code from the window.

If you are a registered user and have logged in, it is possible to save the changes you make for reloading later. Save and Load buttons will appear that allow you to keep one copy of the program you are working on. Note that these saved programs can be accessed from anywhere if you have logged in. However, if you are working anonymously, then you will lose your work at the end of the session.

Activecode is even capable of executing graphical programs that use the built in Python turtle module. The program shown below is a very interesting graphics program that uses the turtle and the idea of recursion to construct a type of fractal called a Sierpinski Triangle. Once you run the program, try experimenting with the number of triangle levels. You can find this on line 39 (it is currently set to 3). Try 4! Try some other changes and see what happens (maybe change a few of the colors or make the level 2). If you ever want to go back to the original example, simply reload the page in the browser. One of the great things about activecode is that you can experiment as much as you want. This can be very helpful as you are learning to program.

The CodeLens Tool¶

In addition to activecode, you can also execute Python code with the assistance of a unique visualization tool. This tool, known as codelens, allows you to control the step by step execution of a program. It also lets you see the values of all variables as they are created and modified. The following example shows codelens in action on the same simple program as we saw above. Remember that in activecode, the source code executes from beginning to end and you can see the final result. In codelens you can see and control the step by step progress. Try clicking on the forward button below.

Note that you can control the step by step execution and you can even move forward and backward thru the statements as they execute. The following example shows a more sophisticated program using Python lists. The codelens tool draws very useful pictures as the statements are being executed. These pictures, called reference diagrams, are very helpful as you learn about the more complex aspects of Python.

Self-Check Questions¶

Finally, it is also possible to embed simple questions into the text. These questions provide a way for the students to check themselves as they go along. The questions also provide feedback so that you can understand why an answer may or may not be correct.

Check your understanding

This next type of question allows more than one correct answer to be required. The feedback will tell you whether you have the correct number as well as the feedback for each.

Another type of question allows you as the instructor to ask for a value. You can test for the value using Pythons regular expressions. For example:

And finally here is a way of giving your students some simple programming problems where the code is already there for them but not indented or in the correct order. Use drag-and-drop to get everthing right.

Check your understanding

Here is a different sort of codelens visualization. Some codelens blocks can have questions embedded in them that will ask you a question about the value of a variable, or which line will be the next line to execute. This example asks you to keep track of the tot variable as you step through the loop.

Here’s another example that asks the student to predict which line will be the next line executed.

Unit Tests for Code¶

Its nice to be able to have students solve a particular problem by writing some code, its even better if you can give them some feedback and provide some tests for them. Much of the unittest module from Python is available in the unittest module for activecode. Take a look:

Before you go on, fix the add function in the activecode box. The full complement of assertXXX functions is available. You can see the list Here. Now, for an introductory course exposing the inner workings of the unittest class may lead to more confusion that anything. But, you can still get the benefit of the unittest module with activecode by placing it in the hidden code at the end. You can hide the code by placing it after a line that contains ====. The source code for the above example with the unit tests hidden would look like this:

.. activecode:: units1

   def add(a,b):
      return 4

   ====
   from unittest.gui import TestCaseGui

   class myTests(TestCaseGui):

       def testOne(self):
           self.assertEqual(add(2,2),4,"A feedback string when the test fails")
           self.assertAlmostEqual(add(2.0,3.0),5.0,"Your function failed on inputs of 2.0 and 3.0")

   myTests().main()

Check Your Understanding

Fix the following code so that it always correctly adds two numbers.

from unittest.gui import TestCaseGui

class myTests(TestCaseGui):

    def testOne(self):
        self.assertEqual(add(2,2),4,"A feedback string when the test fails")
        self.assertAlmostEqual(add(2.0,3.0),5.0,"Your function failed on inputs of 2.0 and 3.0")

myTests().main()

Disqus Comment Box¶

A comment box allowing users to add comments and start discussions can be added. A comment box can be added at the page level, but also for an individual section or question, allowing discussion of that particular content.

Tabbed Question¶

Any of the existing question types can be placed in a tabbed exhibit-style question. This may be used to provide an possible answer or a Disqus discussion box specifically related to a certain question.

We are working on additional question types as well. Give us your feedback on our Facebook page.

Polls¶

Reveals¶

DOM Access¶

Python programs written in activecode windows can now import the document module. This document module allows access to basic elements of the web page, including the new text entry box called text1 like this one. Try running the program, then change the value in the text entry box and run it again.

JavaScript¶

We have come to realize that not everyone loves Python as much as we do. So we have now made it possible to write activecode examples in pure javascript as well as Python. Here is a simple example:

Adding a javascript example is just as easy as Python, all you need to do is add a :language: parameter to the activecode directive.

HTML¶

Teaching a class on HTML and simple web design? Why not use activecode for HTML too? Although you don’t run HTML, clicking the run button will case the HTML to be rendered.

Blockly¶

Add a print statement after the set X to 10. Click on text and drag out a print block; connect it to the set block. Then click on variables and drag out the X block and connect it to the print block. Now click the run button and you should see 10 printed in the gray output area.

What To Do Now¶

Now that you have seen some of these tools in action, you can do more exploration by going back to the Runestone Interactive site and choosing the courseware examples that we have already created. The first, How to Think Like a Computer Scientist: Interactive Edition, provides an introductory course. This course covers the basic ideas of computer science and helps you learn Python programming. The second course, Problem Solving with Algorithms and Data Structures Using Python, is a thorough introduction to data structures and algorithms using Python. Topics include stacks, queues, trees, graphs, and recursion.

We hope you will find these tools and materials useful. If you want to get more involved, feel free to download the tools and write your own courseware. Everything you need can be found in the current GitHub repository.