# An Overview of Runestone Interactive¶

Runestone Interactive is a project focusing on providing tools and content for the purpose of creating interactive computer science courseware. We provide a complete introductory series of chapters that can be used as is, or if you wish, you can customize the chapters. You can even start from scratch and write your own interactive textbook using the tools that we provide. In order to see how the tools work, the following sections will show them in action.

## 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.

## 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.

def main():
print("Hello world")
return 45

print("My first program adds a list of numbers")
myList = [2, 4, 6, 8, 10]
total = 0
for num in myList:
total = total + num
print(total)


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 “30” as the answer. Modify the total calculation by changing the addition symbol, the “+”, to the multiplication symbol, “*”. Press run to see the new results (note that you should also fix the total initialization for a correct claculation). 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.

import turtle

def drawTriangle(points,color,myTurtle):
myTurtle.fillcolor(color)
myTurtle.up()
myTurtle.goto(points[0][0],points[0][1])
myTurtle.down()
myTurtle.begin_fill()
myTurtle.goto(points[1][0],points[1][1])
myTurtle.goto(points[2][0],points[2][1])
myTurtle.goto(points[0][0],points[0][1])
myTurtle.end_fill()

def getMid(p1,p2):
return ( (p1[0]+p2[0]) / 2, (p1[1] + p2[1]) / 2)

def sierpinski(points,degree,myTurtle):
colormap = ['blue','red','green','white','yellow',
'violet','orange']
drawTriangle(points,colormap[degree],myTurtle)
if degree > 0:
sierpinski([points[0],
getMid(points[0], points[1]),
getMid(points[0], points[2])],
degree-1, myTurtle)
sierpinski([points[1],
getMid(points[0], points[1]),
getMid(points[1], points[2])],
degree-1, myTurtle)
sierpinski([points[2],
getMid(points[2], points[1]),
getMid(points[0], points[2])],
degree-1, myTurtle)

def main():
myTurtle = turtle.Turtle()
myWin = turtle.Screen()
myPoints = [[-100,-50],[0,100],[100,-50]]
sierpinski(myPoints,3,myTurtle)
myWin.exitonclick()

main()


## 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.

(firstexample)

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.

(secondexample)

## 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.

• Python
• Yes, Python is a great language to learn, whether you are a beginner or an experienced programmer.
• Java
• Java is a good object oriented language but it has some details that make it hard for the beginner.
• C
• C is an imperative programming language that has been around for a long time, but it is not the one that we use.
• ML
• No, ML is a functional programming language. You can use Python to write functional programs as well.

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.

sc-1-2: Which colors might be found in a rainbow? (choose all that are correct)
• red
• Red is a definitely on of the colors.
• yellow
• Yes, yellow is correct.
• black
• Remember the acronym...ROY G BIV. B stands for blue.
• green
• Yes, green is one of the colors.

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:

What is the value of 25 expressed as an octal number (base 8)? That's base 10! 25 in octal please!

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.

sc-1-3: Construct a block of code that correctly implements the accumulator pattern.

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.

(codelens_question)

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

(codelens_question_line)

## Timed Exam Questions¶

You can add a timed exam of multiple-choice/fill-in-the-blank/clickable-area/drag-n-drop questions that the user can only take once. All the feedback will be shown after the time is up or after the user has clicked the “Submit Answers” button at the end of the timed exam. To start the timed exam click on the “Start” button. This will also start the countdown of the time remaining. You can pause the timer by clicking on the “Pause” button and start it again by clicking on the “Resume” button. When you pause the timed exam the questions will be hidden. There is also a clock icon that will display the time remaining when the reader hovers over it.

Please note that you can currently only have one timed exam per html page.

All you need is the timed directive–you can specify the time limit (in minutes), and there are options for no feedback, no results, and no time limit (in which case it will keep track of the amount of time taken to complete the exam). A timed exam can hold any number of multiple choice, fill in the blank, clickable area, and dragndrop components.

sc-1-4: Under which of these conditions will a sequential search be faster than a binary search?
• The value you are searching for is the first element in the array.
• Only when the search value is the first item in the array, and thus the first value encountered in sequential search, will sequential be faster than binary.
• The value you are searching for is the last element in the array
• In this case a sequential search will have to check every element before finding the correct one, whereas a binary search will not.
• The value you are searching for is in the middle of the array.
• Results will differ depending on the exact location of the element, but Binary Search will still find the element faster while Sequential will have to check more elements.
• The value you are searching for is not in the array
• If the search value is not in the array, a sequential search will have to check every item in the array before failing, a binary search will be faster.
• Sequential Search can never be faster than Binary Search.
• When the search value is the first element, Sequential will always be faster, as it will only need to check one element.
Click on the correct cells.Remember, the operator '=' is used for assignment.
correct N-A N-A correct
Incorrect incorrect correct correct
This row is incorrect ... ... ...
This is a drag n drop question. This is feedback.

Fill in the blanks to make the following sentence: “The red car drove away” The Try 'red' car drove Try 'away'

## 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:

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")

myTests().main()


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

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")

myTests().main()


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

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")

myTests().main()


## Drag N Drop¶

You can add a Drag n drop matching question to your page simply by defining the pairs of matchable elements within a dragndrop directive. The order of draggable elements and their respective dropzones will be randomized so the pairs aren’t always side-by-side.

This is a drag n drop question. This is feedback.
• Drag me to 1
• I am 1
• Drag me to 2
• I am 2
• Drag me to 3
• I am 3

## Clickable Area¶

Clickable area is another type of assess question you can use. All you need to do is write the code you wish to be in the question, and wrap the parts that you would like to be clickable in either a click-correct tag or a click-incorrect tag. The students can click on all elements you defined as being clickable, and will be evaluated once they click the ‘Check Me’ button.

Click on all assignment statements.Remember, the operator '=' is used for assignment.
def main():
x = 4
for i in range(5):
y = i
if y > 2:
print(y)

## 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 components 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.

Write a program that prints “Hello, world”.

print("Hello, world")


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

## Polls¶

On a scale from 1 to 10, how important do you think it is to have a polling directive in the Runestone Tools?
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

## Reveals¶

This content starts out hidden. It’s visibility can be toggled by using the Show/Hide button.

The reveal block can also contain other directives (ActiveCode, Disqus block, etc):

print ("Hello, world")


## 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.

import document

t = document.getElementById('text1')
print('value = ', t.value)


## 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:

var x = 10;
var y = 11;
var z = x + y;
console.log(z);
function fact(n) {
if(n <= 1) return 1;
else {
return n * fact(n-1);
}
}
console.log(fact(10));
writeln('hello world');


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 cause the HTML to be rendered.

<html>
<body>
<style>
h2 { font-size: 48px;
color: red;
}
</style>
<h2>Hello World</h2>
<ul>
<li>one</li>
<li>two</li>
</ul>
</body>
</html>


## 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.

## Other Languages in ActiveCode¶

Activecode now supports Java, C++ and C through a backend server, not in the browser. You can use them by specifying the language to be java, cpp or c In addition it supports either Python3 or Python2 outside of the browser using python3 or python2 as the language. You are limited to non-graphical programs in any of these options.

import java.util.Scanner;

public class TempConv {
public static void main(String[] args) {
Double fahr;
Double cel;
Scanner in;

in = new Scanner(System.in);
System.out.println("Enter the temperature in F: ");
fahr = in.nextDouble();

cel = (fahr - 32) * 5.0/9.0;
System.out.println(fahr + " degrees F is: " + cel + " C");

System.exit(0);
}

}


## Audio Tours¶

for name in ["Joe", "Amy", "Brad", "Angelina", "Zuki", "Thandi", "Paris"]:
print("Hi", name, "Please come to my party on Saturday!")


## 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.