Languages

I am trying to make lesson/notenoughtimespent look different. The problem is that I cannot seem to customize the placeholders. When I try, the coding shows up. What I mean is this:

This is how I would like it to look:

 

This lesson requires 5:00 minutes

You have spent 4:23 minutes

 
 
I can only seem to get the following, when i add the actual code for the time, rather than the static dummy text used above:
 
 

This lesson requires {$a->timerequired}

You have spent {$a->timespent}

How can I code it so that I can get the result I want?


Here is my coding:


<p style="text-align: center;" align="center"><span style="font-family: Arial,sans-serif; font-size: x-large;" face="Arial, sans-serif"> <span size="3"> TIME REQUIREMENT </span> </span></p>
<p style="text-align: center;" align="center"><span style="font-family: Arial,sans-serif; font-size: small;" face="Arial, sans-serif"></span></p>
<p style="text-align: center;" align="JUSTIFY"><span style="font-family: Arial,sans-serif; font-size: x-large;" face="Arial, sans-serif"> <span size="3">This lesson requires <span style="color: #800000;">{$a-&gt;timerequired}</span></span></span></p>
<p style="text-align: center;" align="JUSTIFY"><span style="font-family: Arial,sans-serif; font-size: x-large;" face="Arial, sans-serif"> <span size="3">You have spent <span style="color: #800000;">{$a-&gt;timespent}</span> </span> </span></p>
<p></p>
<p style="text-align: center;" align="JUSTIFY"><span style="font-family: Arial,sans-serif; font-size: large;" face="Arial, sans-serif"> <span size="3"> The state requires that you <span style="text-decoration: underline;"><span style="color: #800000;"><strong>complete the time requirement</strong></span></span> before you can proceed, even if you answered all the practice questions correctly. We have no control over this. Please go back into the lesson, and complete the time requirement. </span> </span></p>