115 lines
8.2 KiB
HTML
115 lines
8.2 KiB
HTML
<div>
|
|
<h1> Studyplan user manual</h1>
|
|
<ul class="nav nav-tabs">
|
|
<li class="nav-item"><a class="nav-link " href="index.htm">Main</a></li>
|
|
<li class="nav-item"><a class="nav-link " href="create-studyplan.htm">Creating a study plan</a></li>
|
|
<li class="nav-item"><a class="nav-link active" href="view-studyplan.htm">Viewing a studyplan - for students</a></li>
|
|
<li class="nav-item"><a class="nav-link " href="teacherview-studyplan.htm">Viewing a studyplan - for teachers</a></li>
|
|
<li class="nav-item"><a class="nav-link " href="advanced.htm">Advanced topics</a></li>
|
|
<li class="nav-item"><a class="nav-link " href="configuration.htm">Configuration</a></li>
|
|
</ul>
|
|
<h2>Using the studyplan - for students</h2>
|
|
<p>If you followed the post-install instructions, then every student associated with a studyplan will have the link <i>My studyplan</i>
|
|
in the top menu.</p>
|
|
<p><img src="img/Student-link-mystudyplan.png" class="border border-primary rounded-lg ml-3"></p>
|
|
<p>Clicking on this link shows the student all studyplans they are enrolled in as tabs.</p>
|
|
<p><img src="img/Student-studyplan.png" class="border border-primary rounded-lg ml-3"></p>
|
|
<p>Each course has it's current outcome displayed with an icon and a color. The arrows protruding from the courses also show the color of it's icon</p>
|
|
<table>
|
|
<tr>
|
|
<th>Meaning</th>
|
|
<th class="pr-3 pl-3">Icon</th>
|
|
<th>Color</th>
|
|
<th class="pl-3">Remarks</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Completed (generic)</td>
|
|
<td class="text-center"><i title="Completed" style="float: none;" class="r-course-result fa fa-check-circle r-completion-complete"></i></td>
|
|
<td>Bootstrap color variable <i>--blue</i></td>
|
|
td class="pl-3">(Used only in the <i>Moodle course completion</i> studyplan aggregation methods)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Completed Passed</td>
|
|
<td class="text-center"><i title="Completed" style="float: none;" class="r-course-result fa fa-check-circle r-completion-completed"></i></td>
|
|
<td>Bootstrap color variable <i>--success</i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Good</td>
|
|
<td class="text-center"><i title="Good" style="float: none;" class="r-course-result fa fa-check-circle r-completion-good"></i></td>
|
|
<td>Bootstrap color variable <i>--info</i></td>
|
|
<td class="pl-3">(Used only in the <i>Manual</i> studyplan aggregation methods)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Excellent</td>
|
|
<td class="text-center"><i title="Excellent" style="float: none;" class="r-course-result fa fa-check-circle r-completion-excellent"></i></td>
|
|
<td>Bootstrap color variable <i>--blue</i></td>
|
|
<td class="pl-3">(Used only in the <i>Manual</i> studyplan aggregation methods)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Progress/Not yet completed</td>
|
|
<td class="text-center"><i title="In progress" style="float: none;" class="r-course-result fa fa-exclamation-circle r-completion-progress"></i></td>
|
|
<td>Bootstrap color variable <i>--warning</i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Failed</td>
|
|
<td class="text-center"><i title="In progress" style="float: none;" class="r-course-result fa fa-times-circle r-completion-failed"></i></td>
|
|
<td>Bootstrap color variable <i>--danger</i></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Not started</td>
|
|
<td class="text-center"><i title="Not started" style="float: none;" class="r-course-result fa fa-circle-o r-completion-incomplete"></i></td>
|
|
<td>Bootstrap color variable <i>--gray</i></td>
|
|
</tr>
|
|
</table>
|
|
<br>
|
|
<p> As you can see, the used colors depend on your theme. The configured colors for <i>success</i>, <i>warning</i>, <i>danger</i> and <i>info</i> are all
|
|
used. If you wish to further configure the colors, you can choose to redefine the other variables (e.g. <i>--blue</i> and <i>--gray</i>) your theme's
|
|
SCSS additions.
|
|
</p>
|
|
<p> By coloring the arrows in the color of the progress, both students and teachers can quickly see a student's progress in a course</p>
|
|
<p> Study plans that use the <i>Moodle course completion</i> aggregation method show a small circle that shows the progress percentage of all requirements,
|
|
instead of an icon</p>
|
|
|
|
<h2>Course detail view</h2>
|
|
By clicking on a course, a student can view more details about this course.
|
|
<p>By clicking on the <b>course title</b>, or any of the <b>activities</b> the student is directly sent to the course or activity page, in a new tab.</p>
|
|
|
|
<h3>Moodle course completion view</h3>
|
|
<p><img src="img/Student-coursedetails-corecompletion.png" class="border border-primary rounded-lg ml-3"></p>
|
|
<p>Per completion requirement, it is shown whether or not the student has <b>completed</b>, <b>passed</b> or <b>failed</b> the requirement.</p>
|
|
<p>The completion categories have a circle showing the progress in this category, while the status indicator to the top right shows the total status</p>
|
|
<p>Until the course end date has passed, the end status is marked as <b>progress</b> as long as one or more requirements are met or graded.
|
|
<i>After</i> the course end date has passed, ther course is indicated as <b>failed</b> if the completion requirements are not met</p>
|
|
<p> By clicking on the <a class="s-required complete"><i class="fa fa-question-circle"></i></a> icon, the student can see the specific requirements for each
|
|
condition or activity.</p>
|
|
<p>If a teacher left feedback for an activity, the link <i>View feedback</i> is shownand shows the specific feedback upon clicking it.</p>
|
|
|
|
<h3>Manual view</h3>
|
|
<p><img src="img/Student-coursedetails-manual.png" class="border border-primary rounded-lg ml-3"></p>
|
|
<p>Per selected activity, it is indicated if the student has completed this activity or not</p>
|
|
<p>Until the course end date has passed, the end status is marked as <b>progress</b> as long as one or more requirements are met or graded.
|
|
<i>After</i> the course end date has passed, ther course is indicated as <b>failed</b> if the completion requirements are not met
|
|
<b>and the failed option is enabled</b> in the studplan configuration</b></p>
|
|
<p>If a teacher left feedback for an activity, the link <i>View feedback</i> is shownand shows the specific feedback upon clicking it.</p>
|
|
<p>(This is due to the specific grading requirements of the first school to request the study plan plugin)</p>
|
|
|
|
<h2>Sharing the study plan</h2>
|
|
<p>All students have the <a class="btn btn-primary" id="manage_invites"><i class="fa fa-share"></i> Share studyplan access</a> button</p>
|
|
<p>Using this button, the student can share access to their studyplan with anyone they choose. (Generally it is recommended that students share therein
|
|
study plan with their parents)
|
|
</p>
|
|
<p>The student first enters the <i>Invite management</i> page where they can add, remove, edit or re-send invitations</p>
|
|
<p><img src="img/Share-studyplan-manage.png" class="border border-primary rounded-lg ml-3"></p>
|
|
<p>By clicking the <i class="fa fa-eye text-primary"></i> icon, the student can verify how their invitees see the studyplan</p>
|
|
<p>the other icons are respecively
|
|
<i class="fa fa-envelope text-primary">re-send mail</i>,
|
|
<i class="fa fa-pencil text-primary">edit</i> and
|
|
<i class="fa fa-trash text-primary">delete</i></p>
|
|
|
|
<p>When starting a new invite, the student is asked to provide the <i>name</i> and <i>email</i> of the person to send the invitation to</p>
|
|
<p><img src="img/Share-studyplan-add.png" class="border border-primary rounded-lg ml-3"></p>
|
|
<p>After completing the invitation, the system sends an email to the invitee with a unique link specific to the invitee. By clicking the link,
|
|
the invitee can see the student's study plan, grades and provided feedback.
|
|
</p>
|
|
<p>Upon deleting the invitation, the unique link is immediately deactivated and all access the invitee had to view the student's studyplan is revoked.</p>
|
|
</div> |