Our aim with this post is to show you how to make a simple web page like this one with php so that you can incorporate it into your website.PHP_H

In this page you will be able to include spelling exercises like those that are in the Ortography section of Gomino Labs.

For this we are going to need:

  • Access to a website to upload my page and that enables php to run
  • An account on APIcultur in order to obtain my “Access key”

In this case the exercises would refer to problems regarding the letter H. In order to use other letter you only have to change the number of the named function. However, we have created a post for each of these cases (see Tutorials)

Please note: 

  • The exercises change every time you run the program. This is because the exercises will address the problems with the letter H.api ortografia The advantage is that the exercises are always new.

So…How do I make my exercises page?

1.  Introduction to the setting of each exercise

With this we can modify the settings that we want to study (number of questions, difficulty levels, Spanish proficiency levels…) or we can make it so that it remains fixed, so we would not have to substitute the expression “$_REQUEST” for a symbol = how you see the following example:

[php autolinks=”false” gutter=”true” collapse=”false” firstline=”4″ highlight=”true” light=”true” smarttabs=”true” tabsize=”4″ toolbar=”true”]

//recogemos los parámetros
         if (isset($_REQUEST[‘dificultad’])){
                 $dificultad = $_REQUEST[‘dificultad’];
         } else {
                 $dificultad = 0;
         }
         if (isset($_REQUEST[‘nivel’])){
                 $nivel= $_REQUEST[‘nivel’];
         } else {
                 $nivel = 0;
         }

         $numPreguntas = 10;
[/php]

2.  We obtain the questions from the exercises bank

We have to introduce the key (Access key) that the Apicultur platform gave us when we registered. Then a URL with the exercises will be generated.

[php autolinks=”false” gutter=”true” collapse=”false” firstline=”4″ highlight=”true” light=”true” smarttabs=”true” tabsize=”4″ toolbar=”true”]

function obtenerPreguntas($numPreguntas,$dificultad,$nivel) {
         #API Key de nuestra aplicación en APICultur. Para más informacion:         http://www.apicultur.com/instrucciones/
         $access_key = "PON_TU_ACCESS_KEY_AQUI";

         $url="http://store.apicultur.com/api/ejercicioortografiah/1.0.0/".$numPreguntas."/".$dificultad."/".$nivel;

[/php]

3.  Calling the API

In this sense, the API accesses the exercises bank and returns results extracted from the bank. What is returned is a JSON object, that is to say, unformatted text, without buttons, boxes or any type of design.

[php autolinks=”false” gutter=”true” collapse=”false” firstline=”4″ highlight=”true” light=”true” smarttabs=”true” tabsize=”4″ toolbar=”true”]

#Iniciamos curl
         $ch = curl_init();

         #Pasamos nuestro API Key y señalamos que lo que nos van a devolver es JSON
         curl_setopt($ch,CURLOPT_HTTPHEADER,array( ‘Accept: application/json’, ‘Authorization: Bearer ‘ . $access_key ));

         #Pasamos la url de la api
         curl_setopt($ch, CURLOPT_URL, $url);
         curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

         #Introducimos en una variable el valor que nos devuelve la api
         $respuesta = curl_exec($ch);

         $http_status = curl_getinfo($ch, CURLINFO_HTTP_CODE);

         #Cerrar el recurso cURL y liberar recursos
         curl_close($ch);
[/php]

4. Checking process

If the result returned is “200”, that means that everything has worked properly and we will have obtained our questions. If there is a problem, an error message will appear.

[php autolinks=”false” gutter=”true” collapse=”false” firstline=”4″ highlight=”true” light=”true” smarttabs=”true” tabsize=”4″ toolbar=”true”]

#Comprobamos el código devuelto por la API para ver que todo ha salido correctamente y en caso positivo devolvemos ok
         switch ($http_status) {
    case ‘200’:
                 $obj = json_decode($respuesta);
           break;
    default:
           echo "<br/>error al obtener las preguntas.";
           echo "<br/>Error:" .$http_status ;
      break;
[/php]

5. Formatting the exercises

We will have to introduce the code according to what we would like it to show (boxes, buttons…). The example for the template that we’ve seen before would be the following:

[php autolinks=”false” gutter=”true” collapse=”false” firstline=”4″ highlight=”true” light=”true” smarttabs=”true” tabsize=”4″ toolbar=”true”]

                                   $pregunta = $cuestion->{‘pregunta’};
                                   $correcta = $cuestion->{‘correcta’};
                                   $respuestas = $cuestion->{‘respuestas’};

                                   echo "<div class=’pregunta’ id=’pregunta".$i."’>".$i."." .$pregunta."</div>";

                                   foreach ($respuestas as $respuesta){

                                            if ($respuesta==$correcta){
                                                    echo"<input type=’button’ value=’".$respuesta."’ onclick=’corregir("pregunta".$i."","".str_replace("_",$correcta,$pregunta)."",true)’ />";
                                            } else {
                                                    echo"<input type=’button’ value=’".$respuesta."’ onclick=’corregir("pregunta".$i."","".str_replace("_",$correcta,$pregunta)."",false)’ />";
                                            }

                                   }

                                   $i++;

                                   echo "</p>";

                          }
                          ?><div><a href="ejercicio_ortografia.php">Volver</a></div><?
                 }
         } else {

?>

         <p>
      <form action="ejercicio_ortografia.php" method="POST" name="theform">
                 dificultad: <input type="text" name="dificultad" />
                 <h6>(Deberá tomar un valor entre 1 y 4)</h6><br/>
                 nivel: <input type="text" name="nivel" />
                 <h6>(Deberá tomar un valor entre 1 y 4)</h6><br/>
                 <input type="submit" value="¡Dame ejercicios!" />
[/php]

This allows us to configure the design as we would like. Each user can change it according to their needs, including trial and error messages, changing font colours etc.

Accessing the full source code

If you want to Access the full source code you can download it by clicking on this link.

Recommended Links

Share →