Added periods and course timing to documentation
|
@ -67,6 +67,32 @@
|
|||
<p>To re-arrange the courses in the study plan, simply drag and drop them from the places they are now in.</p>
|
||||
<p><img src="img/Studyitem-dragdelete.png" class="border border-primary rounded-lg ml-3"></p>
|
||||
<p>To remove a course from the study plan, simply drag it to the red garbage bin that appears on dragging</p>
|
||||
|
||||
<h3>Layers within a study line</h3>
|
||||
To add a course to a new layer within a studyline, drag it to the bottom of the study line. There are small slots shown there, which
|
||||
will fully open when the course is dragged over them
|
||||
<p><img src="img/Studyplan-draglayers.png" class="border border-primary rounded-lg ml-3"></p>
|
||||
|
||||
<a id="periods"><h2>Configuring periods</h2></a>
|
||||
All periods in the study plan will have a label showing the timing and it's short name directly above their course columns in the
|
||||
timeline. Upon hovering over the short name, it's full name will appear.<br>
|
||||
Also, the period matching the current date, will be highlighted in the color
|
||||
indicated by the <pre style="display:inline;">--highlight</pre> css variable, which corresponds to the
|
||||
value of the <pre style="display:inline;">--info</pre> color by default.
|
||||
<p></p>
|
||||
|
||||
<p><img src="img/Periods-in-plan.png" class="border border-primary rounded-lg ml-3"></p>
|
||||
<p><img src="img/Period-hover.png" class="border border-primary rounded-lg ml-3"></p>
|
||||
<p> At the start, the periods start and end times will be naively selected by splitting the study plan's duration among the number of periods.<br>
|
||||
By clicking on the <i class="text-primary fa fa-pencil"></i> icon, you can open the edit screen and change the period's <i>full name</i>,
|
||||
<i>short name</i>, <i>start time</i> and <i>end time</i>
|
||||
</p>
|
||||
<p><img src="img/Period-edit.png" class="border border-primary rounded-lg ml-3"></p>
|
||||
<p></p>
|
||||
<div class="generalbox alert alert-success"><b>TIP:</b><br>
|
||||
Before you start dragging courses into a studyplan page, make sure you have the periods configured correctly.
|
||||
</div>
|
||||
|
||||
<a id="studycourses"><h2>Configuring courses</h2></a>
|
||||
<p>Once a course is added to the studyplan, an icon shows if it needs to be configured (<i class='fa fa-exclamation-circle text-warning'></i>) or
|
||||
is already configured (<i class='fa fa-check text-success'></i>).</p>
|
||||
|
@ -84,6 +110,28 @@
|
|||
such will all need to be completed for the course to be marked as completed, regardless of the minimum percentage configured</p>
|
||||
<p><img src="img/Course-config-bistate.png" class="border border-primary rounded-lg ml-3"></p>
|
||||
|
||||
<h3>Course start and end times</h3>
|
||||
<p> Often, the course will have their start and end times configured differently than the period you drop them in. If this is the case,
|
||||
a screen will appear asking if you want to update the course's start and end times. The time details of both course and period will
|
||||
be shown for your comparison. By clicking <button class="btn btn-danger">Yes</button>, the course's start and end times will be
|
||||
updated to those of the period. Any activity dates set will be adjusted according to the changed start date.</p>
|
||||
<p><img src="img/Course-timing-mismatch-screen.png" class="border border-primary rounded-lg ml-3"></p>
|
||||
<div class="generalbox alert alert-info"><b>NOTE:</b><br>
|
||||
<p> If you do not change the course start and end times at this moment, you always have the opportunity later on
|
||||
by clicking the <i class="fa fa-calendar-times-o"></i> icon in the course detail screen. (As seen in the screenshot below).</p>
|
||||
<p> This icon will be <i class="fa fa-calendar text-success"></i> (color <i>--success</i>) to indicate if the course timing matches
|
||||
period timing. If not, it is shown as <i class="fa fa-calendar-times-o text-warning"></i> (color <i>--warning</i>)</p>
|
||||
</div>
|
||||
|
||||
<h3>Courses spanning multiple periods</h3>
|
||||
<p> If a course should span multiple periods, you can specify this in the course detail screen.<br>
|
||||
On the top right of the course details screen you can select the desired period span of this course.
|
||||
Do note however, that the available spans are limited by the available space to the right of the course in the studyplan</p>
|
||||
<p><img src="img/Course-timing-indicators.png" class="border border-primary rounded-lg ml-3"></p>
|
||||
<p> Upon selecting the span you want, the course display will immediately be updated to reflect the changes.<br>
|
||||
immediately after this, you will see the screen asking if you want to change the course start and end times to reflect the
|
||||
new period span.</p>
|
||||
|
||||
<a id="studybadges"><h2>Adding badges</h2></a>
|
||||
<p>The toolbox also shows you the site-wide badges that are available for students. These can be dragged into the slots around and between the courses.</p>
|
||||
<p>When you click on the <i class="fa fa-gear"></i> icon in the badge it shows you additional information about the badge</p>
|
||||
|
|
BIN
doc/img/Course-timing-change.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
doc/img/Course-timing-indicators.png
Normal file
After Width: | Height: | Size: 40 KiB |
BIN
doc/img/Course-timing-mismatch-screen.png
Normal file
After Width: | Height: | Size: 32 KiB |
BIN
doc/img/Period-edit.png
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
doc/img/Period-hover.png
Normal file
After Width: | Height: | Size: 5.4 KiB |
BIN
doc/img/Period-plan-multispan.png
Normal file
After Width: | Height: | Size: 24 KiB |
BIN
doc/img/Periods-in-plan.png
Normal file
After Width: | Height: | Size: 18 KiB |
BIN
doc/img/Studyplan-draglayers.png
Normal file
After Width: | Height: | Size: 14 KiB |