= Bolt Tutorial, Part I: Courses and Lessons =

== Creating a course ==

[ServerIntro Install the BOINC software] on a Linux system
(or run the [VirtualMachines BOINC server virtual machine] in a VMWare
player on any computer).

Use [MakeProject make_project] to create a BOINC project named "test":
{{{
> cd boinc/tools
> make_project --web_only test
}}}
Edit httpd.conf as directed (you'll need root access to do this).
Let's say your server's domain name is "a.b.c".

Visit http://a.b.c/test/create_account.php and create an account for yourself.

Visit http://a.b.c/test_ops/bolt_ops.php,
and create a course named "Identifying California conifers"
with course document "conifer.php" (we'll create this later).

== Lessons and sequences ==

Let's start with a simple course consisting of two lessons.
Each lesson consists of a PHP or HTML file.
Create the following files in ~/projects/test/html/user:

conifer_intro.php
{{{
<?php

echo "
Throughout California's Sierra Nevada mountains,
and especially at high altitudes,
the dominant plants are tall, straight
trees with narrow needle-like leaves.
These trees are called <b>conifers</b>
because they carry their seeds in cones.
<p>
This course will teach you how to identify
the most common types of California conifers.

";
?>

}}}

conifer_decid.php
{{{
<?php

echo "
Trees can be classified into two groups:
<b>coniferous</b> and <b>deciduous</b>.
These groups differ in several ways:

<ul>
<li> Most conifers are 'evergreen':
they maintain their leaves throughout the year.
Deciduous trees drop their leaves in autumn.
<li> Conifer leaves are either needles or overlapping scales,
whereas deciduous leaves are broad and flat.

<ul>
";

?>

}}}

conifer.php
{{{
<?php

function bolt_header($title) {
    echo "
        <link rel=stylesheet href=conifer.css type=text/css>
        <table><tr><td width=600 height=126 background=images/conifers.jpg>
        <font size=6 color=#ffffff>
        &nbsp;Identifying<br>&nbsp;California<br>&nbsp;Conifers
        </font>
        </td></tr></table>
        <p>
        <h2>$title</h2>
    ";
}

function bolt_footer() {
    echo "
        <div id='footer'>
        <table width=100%><tr><td align=center>
        &copy; 2008
        </td></tr></table>
        </div>
    ";
}

return sequence(
    name('course'),
    lesson(
        name('Introduction'),
        filename('conifer_intro.php')
    ),
    lesson(
        name('Conifers and deciduous trees'),
        filename('conifer_decid.php')
    )
);
?>
}}}

conifer.css:
{{{
body {
    background-color: white;
    font-family: "Trebuchet MS", Verdana, Arial, Sans-Serif;
    font-size: 16px;
    color: black;
    width: 800px;
}

img {
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 0px;
}

p.caption {
    text-align: center;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}
}}}

Diagramatically, the course structure is:

[[Image(seq.png, nolink)]]

Now visit http://a.b.c/test/bolt.php.
You'll be asked to log in; do so.
Click on the button to start the course.
Fill in the form asking for your demographic info.
Then you'll see:

[[Image(bolt_l1.jpg, nolink)]]

Note that below your lesson Bolt has added some navigation links
and a form to ask questions.
Click on the "Next" button.
You'll see:

[[Image(bolt_l2.jpg, nolink)]]

Now suppose that instead of reading the lesson,
you go away (for an hour or a month) and return.
Simulate this by visiting http://a.b.c.test/bolt.php; click Resume.
Notice that Bolt "remembers" where you are in the course
(this is stored in the database;
it will work even if you go to a different computer).

Now visit http://a.b.c.test/bolt.php again,
and click on "History".
You'll see something like:

[[Image(bolt_history.jpg, nolink)]]

Bolt has recorded your course interactions and their timing,
in its database; this is used for course analytics (see part III of this tutorial).

[BoltTutorialExercises Continue to Part II]