Build a Simple Self-Assessment Using Bootstrap

Enable learners to check their knowledge all by themselves

Posted by Sébastien Arbour on June 01, 2017

Picture: Pixabay used under CC0 Licence

Assessments are essential tools for the learner. With them, they get feedback on whether they are on the right track with their learning or not and it gives them the chance to adjust accordingly. However, assessments take time and resources to correct. How to get over this dilemma?

That is where the self assessment comes into play. It gives the opportunity for learners to quickly verify their achievements without taking too much resources from the trainer.

Here is one example that I developed for an intercultural management online course.

Getting Started with Bootstrap

Before we start with the code, you need to get familiar with bootstrap if you aren't already. One of the best place to start is w3school.com. If you don't want to download the whole script, you can access it online with the following piece of code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script> src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

The self assessment tool could also be built without bootstrap. You would then need to format the table by yourself and make sure that it is responsive.

Building the Self Test

We can now use the Bootstrap's classes to build the self-test. In this case, I did use a table with the class table table-bordered. Now here is an example:

Statement Universal Cultural Personal
Smilling for no apparent reason
Drinking water when thirsty
Visiting museum during the weekend

You have the basic layout of the table. However, if you try to use the table (and I'm sure you did!), you see that it doesn't do much. The interactions need to be added to the table

The next step is adding a class true or false to each button depending on whether the answer is true or false. The name of the class does not matter and I used them as an example.

Adding a Litte Bit of Jquery

Next step: some script. You need to create an interaction for when the buttons are clicked. I would suggest the following:

  • The button turns green if it is the right answer. Other buttons turn gray.
  • The button turns red if it the answer is wrong. The button for the right answer turns green and the other one, gray.
  • In both case the interaction ends after clicking

I am not going to explain too much in details, but here is the code I added:

<script>
$(document).ready(function(){
$("td.true").on("click",function(e){
$(this).children().css("background-color","green");
$(this).siblings().children().css("background-color","gray");
$(this).off().siblings().off();
});

$("td.false").on("click",function(e){
$(this).children().css("background-color","red");
$(this).siblings(".false").children().css("background-color","gray");
$(this).siblings(".true").children().css("background-color","green");
$(this).off().siblings().off();
});
});
</script>

Now the same table with the interaction

Statement Universal Cultural Personal
Smilling for no apparent reason
Drinking water when thirsty
Visiting museum during the weekend

Voilà!

As an alternative, you can use other colors with rgb or hex. I also prefer using classes than colors directly. This way, making changes will be way easier. Noticed that the color of the font also turns white on false or true?