In the video, I show you how to retain the freedom to decide where to place an optional help button with an element of Bootstrap at nearly any point of your Moodle course.
It should not be determined by technical specifications, whether or not you can offer optional help as a support. It is and should be a didactic decision, no matter what  Moodle or any other course management system (CMS) technically provides at any point of the course. 

Assistance is a quality feature of online courses

A quality feature of online courses is the presence of help at any point in the online course, where a student could run into problems. Help supports the participants in case of difficulties in understanding the language, difficulties of understanding what was wrong or difficulties to go on because of technical problems. So online help supports the student in the same way as teachers in the course room would do. 

In Moodle, there are several points, where it is not easily possible to place a help button, due to lack of build-in technological opportunities.

In the video, I show you a way to overcome those technical obstacles in an elegant way: Use the Bootstrap element modal to place a help button at any place in Moodle, where you want to.

Bootstrap element modal as a help button in Moodle

Make more with Moodle: Optional help with the modal element of Bootstrap

The code for easy copying

The original code is available on the Bootstrap page. You can copy it from there or from below. The code for the help button below is provided with my comments and edited as described in the video.

The text parts in orange are comments; the ones in blue are texts that appear on the buttons or in the modal window exactly like it is. Please, change this text as needed.

<!-- The code for the help window starts here -->
<!-- In the next line you can change the colour of the button. Just replace the word "danger" through a different name for a button -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal">
This is the label for the button that opens the help window. Change this text to your taste.
</button>

<!-- The code for the help window starts here -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">This is the title of the help window</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Write here the text of the help or feedback.
</div>
<div class="modal-footer">
<!-- The below text appears on the button that closes the window. Here too you can change the word "danger", so that the colour of the button changes to your taste -->
<button type="button" class="btn btn-danger" data-dismiss="modal">I understood</button>
</div>
</div>
</div>
</div>

Position the modal window in the centre

With the code from above, the window is shown in the upper half of the screen. However, if you want to show the window in the centre of the page, you have to make the following modification in the second part of the code (marked red):

<!-- The code for the help window starts here -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">This is the title of the help window</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Write here the text of the help or feedback.
</div>
<div class="modal-footer">
<!-- The below text appears on the button that closes the window. Here too you can change the word "danger", so that the colour of the button changes to your taste -->
<button type="button" class="btn btn-danger" data-dismiss="modal">I understood</button>
</div>
</div>
</div>
</div>

Further modifications

This modal window is quite flexible: In the help text itself, you can insert links, format the text or put other Bootstrap elements via HTML code, just like in any other text. Furthermore, the length of the text is not limited. Additionally, the window itself can be resized.

There are many examples of changes on the Bootstrap page. However, you have to dive into the code – but not too deep.

If you have questions, put them into the comments. I’m also interested in knowing how you use the elements in your Moodle course.

Weitersagen …