runestoneinteractive.github.io/instructors.html at master · RunestoneInteractive/runestoneinteractive.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Meet the Runestone Interactive Team">
    <meta name="author" content="Brad Miller">
    <link rel="shortcut icon" href="assets/ico/favicon.ico">

    <title>Runestone for Instructors</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/jumbotron.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="container">
      <div class="header">
        <ul class="nav nav-pills pull-right">
          <li><a href="index.html">Home</a></li>
          <li><a href="library.html">Library</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li><a href="build/html/faq.html">FAQ</a></li>
          <li><a href="build/html/index.html">Docs</a></li>
        </ul>
        <h3 class="text-muted">Runestone Interactive</h3>
      </div>

      <div class="jumbotron">
        <h1>Authors and Instructors</h1>
        <p class="lead">You don't have to write a whole book to use the Runestone tools.  Your task can be as simple as having a few examples ready to demonstrate to the class, or as complex as an entirely new book.</p><p><a class="btn btn-lg btn-primary" href="#getstarted" role="button">Get Started</a></p>
        <p class="lead">
            If you want to use one of our free and open source books for your class, you can do that too.  You can create a book for your own course, or simply use one of the books in our <a href="library.html">library</a>
        </p><p>
            <a class="btn btn-lg btn-primary"  href="customcourse.html">Learn More</a>
        </p>
      </div>

      <div class="row marketing">
        <div class="col-md-6">
          <h2>A Classroom Example</h2>
          <p>Suppose you wanted to have an example program that you could start class with, and then edit and change during the course of the class.  Here is how you would create a simple page for you and your class to load into the browser and experiment with.</p>

          <pre>
Approximating pi
================

.. activecode:: pi_example1

   terms=input("How many terms do you wish?")
   pi = 0.0
   den = 1
   for counter in range(terms):
       nextterm = (4.0/den)*(-1)**counter
       pi = pi + nextterm
       den = den + 2
   print pi


   def leibniz(terms):
       acc = 0.0
       num = 4.0
       den = 1
       for term in range(terms):
           nextterm = num/den * (-1)**term
           acc = acc + nextterm

           den = den + 2

       return acc

Try running the code above with different values for the
number of terms.  How many terms do you need in order to get
3.14159 for the value of pi?
        </pre>

           <p>After you install the RunestoneTools, as described below.  You can save the example above to a file. When you run the <code>paver build</code> command, you will get an html file that you can load into your browser.  It will look like this:
           	<img src="images/pipage.png" width="100%">
           </p>
      </div>

      <div class="col-md-6">
          <h2>An in Class Quiz</h2>
Another Scenario might be that you want to have your students take a quick online quiz that looks like this:

          <img src="images/quizpage.png" width="100%">

You can create a quiz using the same simple markup language used in the previous example.

<pre>
A Short Quiz
============

Answer the following two Questions

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

   What programming language does this site help you to learn?


.. mchoice:: question1_2
   :multiple_answers:
   :answer_a: red
   :answer_b: yellow
   :answer_c: black
   :answer_d: green
   :correct: a,b,d
   :feedback_a: Red is a definitely on of the colors.
   :feedback_b: Yes, yellow is correct.
   :feedback_c: Remember the acronym...ROY G BIV.  B stands for blue.
   :feedback_d: Yes, green is one of the colors.

   Which colors might be found in a rainbow? (choose all that are correct)


</pre>

        </div>

    </div>


      <hr class="featurette-divider">
      <a name="getstarted"></a>
      <h1>Getting Started</h1>

  	<style>
  		.gstart {
  			counter-reset: my-badass-counter;
  		}
  		.gstart dt {
  			position: relative;
  			font: bold 16px Georgia;
  			padding: 4px 0 10px 0;
  		}
  		.gstart dt:before {
  			content: counter(my-badass-counter);
  			counter-increment: my-badass-counter;
  			position: absolute;
  			left: 0;
  			top: 0;
  			font: bold 50px/1 Sans-Serif;
            color: #428bca;
  		}
  		.gstart dd {
  			margin: 0 0 50px 0;
  		}
  		.gstart dt, .gstart dd {
  			padding-left: 50px;
  		}
  	</style>

     <dl class="gstart">
      <dt>Get the Template Project</dt>
      <dd>The quickest way to get up and running is to install the runestone tools with pip:  <code>pip install runestone</code></dd>

      <dt>Create a Folder for your project</dt>
        <dd><code>mkdir myproj</code> You can initialize a template project for yourself by running <code>runestone init</code> inside the project folder.  It will ask you some questions.  You can either take the defaults or customize your project for your own environment.</dd>
      <dt>Edit</dt>
          <dd>The template project has an index.rst file ready to edit.  You can simply start with the index or overview file and build up from there.</dd>
      <dt>Build</dt>
          <dd>The <code>runestone build</code> command will create a nice looking html file for you in the build directory under the template project.  Once you have built you can preview that file directly in your browser.</dd>
      <dt>Deploy</dt>
          <dd>You can serve your project right from your own computer by running <code>runestone serve</code>  Or you can copy the folder in the build subdirectory created by the build command anywhere that will serve a static website, including a site that supports github pages.</dd>
  </dl>


      <hr class="featurette-divider">
      <h1>More Information</h1>
      <ul>
          <li>We have a full set of developer docs <a href="build/html/index.html">here</a></li>
        <li>For a quick reference type <code>runestone help list</code> or <code>runestone help directivename</code>  For example:
        <pre>
    $ runestone help codelens

    .. codelens:: uniqueid
       :tracedata: Autogenerated or provided
       :caption: caption below
       :showoutput: show stdout from program
       :question: Text of question to ask on breakline
       :correct: correct answer to the question
       :feedback: feedback for incorrect answers
       :breakline: Line to stop on and pop up a question dialog
       :python: either py2 or py3

        x = 0
        for i in range(10):
           x = x + i
       </pre></li>
        <li>Check out this <a href="https://runestone.academy/runestone/static/overview/overview.html">Demo Site</a> to see a lot of the available components in action.</li>
      </ul>

      <hr class="featurette-divider">
      <div class="footer">
        <p>&copy; Runestone Interactive 2014</p>
      </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-29883683-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>

  </body>
</html>