Added periods and course timing to documentation

This commit is contained in:
PMKuipers 2023-08-07 16:11:24 +02:00
parent 2f622e63d6
commit 6082fe9d02
9 changed files with 48 additions and 0 deletions

View File

@ -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>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><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> <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> <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 <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> 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> 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> <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> <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>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> <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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
doc/img/Period-edit.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
doc/img/Period-hover.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
doc/img/Periods-in-plan.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB