Adding a risk matrix to your forms

A risk matrix is a common element that you may want to add to your forms.   The basic premise being that field staff would select the likelihood and consequence of an event, and the system can then determine the risk score between low, medium, high and extreme.

A common risk matrix

A common risk matrix

As an example, consider a bulk fuel storage installation.  If evaluating a contamination risk for a well maintained storage container situated on hard rock, a large spill is unlikely to occur, and the consequence of a spill would be minor.  On the other hand, a rusty container on the banks of a city’s water source, would be rated higher on both the likelihood and consequence scales.

Of course you can substitute the scales for objective values if you wish.

Let’s consider that it would look like in a form.



Here we’ve used select lists, but you could just as easily use radio buttons.  What the form allows us to do is select the likelihood and consequence, and automatically set the level or risk.

So how to add this to your form?

Create a new module class, and select the “Source” view rather than the Wizard.

Let’s start with the HTML tab, where we add our three select boxes.

	<label for='likelihood'>Likelihood</label>
	<select name='likelihood' id='likelihood'>
		<option value=''></option>
		<option value='Likely'>Likely</option>
		<option value='Possible'>Possible</option>
		<option value='Unlikely'>Unlikely</option>
	<label for='consequence'>Consequence</label>
	<select name='consequence' id='consequence'>
		<option value=''></option>
		<option value='Major'>Major</option>
		<option value='Moderate'>Moderate</option>
		<option value='Minor'>Minor</option>
	<label for='riskLevel'>Level of Risk</label>
	<select name='riskLevel' id='riskLevel'>
		<option value=''></option>
		<option value='Extreme'>Extreme</option>
		<option value='High'>High</option>
		<option value='Medium'>Medium</option>
		<option value='Low'>Low</option>

And now to paste into the JavaScript tab.

init: function(data){

	//bind an event to every time the likelihood or consequence field changes
	$("#likelihood, #consequence").bind("change",
      function(oEvent) {

          //get the current value of our likelihood and consequence values.
          var s1 = $("#likelihood").val();
          var s2 = $("#consequence").val();
          var sResult = "Undefined";

          //Based on our matrix, determine the result
          switch( s1 ) {
              case "Likely":
                  if( s2 == "Minor" ) sResult = "Medium";
                  else if( s2 == "Moderate" ) sResult = "High";
                  else if( s2 == "Major" ) sResult = "Extreme";

              case "Possible":
                  if( s2 == "Minor" ) sResult = "Low";
                  else if( s2 == "Moderate" ) sResult = "Medium";
                  else if( s2 == "Major" ) sResult = "High";

              case "Unlikely":
                  if( s2 == "Minor" || s2 == "Moderate" ) sResult = "Low";
                  else if( s2 == "Major" ) sResult = "Medium";

          //Now set the risk level select box to the result
          $("#riskLevel").val( sResult );

          //For fun, lets also set the colour of the result to match our matrix value
          var colour;
          switch( sResult ) {
              case "Low": colour = "green"; break;
              case "Medium": colour = "yellow"; break;
              case "High": colour = "orange"; break;
              case "Extreme": colour = "red"; break;

          $("#riskLevel").css("background-color", colour);


That’s it.  You’ve now got a logic based risk matrix in your form.

Of course the sky is the limit as to how you implement this.  I’d love to hear about your implementations of a risk matrix in the comments.

Leave a Reply

Your email address will not be published. Required fields are marked *