Test para Facebook

En este artículo explicaremos el desarrollo de una mini aplicación para Facebook, esta vez hemos creado un test clásico, el típico test, contestas equis preguntas y dependiendo de las respuestas acertadas te dará un resultado. El funcionamiento es bastante sencillo, en este caso hemos puesto doce preguntas con cuatro respuestas cada una y dependiendo de las respuestas que aciertes hará una publicación diferente en tu muro.

Para simplificar la explicación voy a partir el desarrollo en tres partes, primero la parte relacionada con Facebook, la segunda parte será la visual, y la parte que tiene el Test.

Login Facebook

En esta primera parte veremos el código que nos permitirá hacer el login y la solicitará los permisos que necesitemos para la publicación en el muro.

Como ya he explicado en otros artículos anteriores este primer paso no daré muchas explicaciones al respecto, solo os facilito el código comentado y si necesitáis más detalles podéis utilizar el buscador del blog para ver los otros artículo, por ejemplo poniendo Facebook o login os saldrán…

Código para ver si el usuario está logeado y solicitar los permisos que necesites.

<?php
session_start();
 
// Necesitamos el fichero facebook que podeis bajarlo de github.
require 'github/facebook.php';
 
// Cambia estos datos por los de tu aplicación
$facebook = new Facebook(array(
  'appId'  => '12456465456890583',
  'secret' => 'de3e8klj20300e9jkljñ12f7e36kljñ91d6', 
));
 
// Conseguir el ID del usuario
$user = $facebook->getUser();
 
// La url a la que redirigir después de solicitar los permisos.
$my_url="https://apps.facebook.com/afrikitest/";    
 
if ($user) {
  try {   
    $user_profile = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
    $user = null;
  }
}
// Permisos y redirección a la url que hemos puesto antes
if ($user) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl(            array(
                'scope'         => 'publish_stream',
                'redirect_uri' =>$my_url
            ));
}
 
    if (!$user) {
        echo "<script type='text/javascript'>top.location.href = '$loginUrl';</script>";
        exit;
    }
// aqui comenzaría el código de la página  por ejemplo...                    
?>
 
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script src="http://connect.facebook.net/es_ES/all.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<TITLE>FrikóMetro</TITLE>
	.......
	.......

Jquery Tabs (Parte visual)

En esta segunda parte es donde trabajamos sobre la parte visual, en el caso de está aplicación he utilizado jquery con algunas pequeñas modificaciones, en este link (http://jqueryui.com/demos/tabs/) encontraréis la página en la que podéis descargaros la plantilla que yo he utilizado o cualquier otra dependiendo de lo que queráis hacer.

Solo tenéis que personalizar que efectos queréis que tenga vuestro Tabs y bajarlo, luego tenéis que incluirlo en un fichero en vuestro servidor y llamarlo o incluir el css dentro del mismo fichero que la aplicación.

Esta es la imagen personalizada de la demo de jquery que he utilizado en la aplicación “Test para facebook”.

Funcionamiento JavaScript

En esta tercera parte voy a exponer como funciona, en particular utilizaré este javascript para saber los aciertos ,las preguntas contestadas, crear el mensaje de alerta con los datos y finalmente publicar en el muro del usuario.

En este ejemplo inicializo las variables que va voy a utilizar y luego le asigno el valor dependiendo de la respuesta que seleccione el usuario, por último sumo el total de las respuestas correctas y de las respuestas que ha contestado el usuario para crear el mensaje que después publicaré en el muro con los resultados que ha obtenido.

<script>
mensaje="";
var pregunta1 = "0"; 
var pregunta2 = "0"; 
var pregunta3 = "0"; 
var pregunta4 = "0"; 
var pregunta5 = "0"; 
 
function respuesta1(valor) 
{pregunta1 = valor}; 
function respuesta2(valor) 
{pregunta2 = valor}; 
function respuesta3(valor) 
{pregunta3 = valor}; 
function respuesta4(valor) 
{pregunta4 = valor}; 
function respuesta5(valor) 
{pregunta5 = valor}; 
 
</script>
 
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
 
1.   ¿Que personaje de bola de dragon es calvo y con 3 ojos ?<br>
 
          <input type="radio" name="pregunta1" value="A" onclick="respuesta1('A')">
          A. Krilin<BR>
          <input type="radio" name="pregunta1" value="B" onclick="respuesta1('B')">
          B. Ten Shin Han <BR>
          <input type="radio" name="pregunta1" value="C" onclick="respuesta1('C')">
          C. TenSion<BR> 
          <input type="radio" name="pregunta1" value="D" onclick="respuesta1('D')">
          D. Kiko Matamoros <BR>  <BR>   
      </div>
 
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
....
....
 
<script>

Funciones básicas de la aplicación

Esta es la función que se encargará de contar el total de las respuestas acertadas y de la puntuación que le he dado al usuario por acertar cada respuesta, se ejecutará en el evento onclick del botón Resultados.

function examinar() 
{ 
puntuacion=0; 
nocontesta=0; 
contestadas=0; 
puntosmaximos=0; 
 
if(pregunta1!= "0" )
{
  contestadas=contestadas+1
  puntosmaximos=puntosmaximos+8
  if(pregunta1 == "A") {puntuacion=puntuacion+0}
  if(pregunta1 == "B") {puntuacion=puntuacion+8}
  if(pregunta1 == "C") {puntuacion=puntuacion+0}
  if(pregunta1 == "D") {puntuacion=puntuacion+0}
}
else {nocontesta=nocontesta+1} 
 
if(pregunta2 != "0")
{
  contestadas=contestadas+1
  puntosmaximos=puntosmaximos+9
  if(pregunta2 == "A") {puntuacion=puntuacion+0}
  if(pregunta2 == "B") {puntuacion=puntuacion+0}
  if(pregunta2 == "C") {puntuacion=puntuacion+0}
  if(pregunta2 == "D") {puntuacion=puntuacion+9}
}
else {nocontesta=nocontesta+1}
 
if(pregunta3!= "0" )
.....
.....

Publicar en el muro

Por último creo el mensaje que se va a mostrar en el muro del usuario con las puntuaciones, las imágenes y demás cosas que quiero que pinte en su muro. Además he incluido un alert para que tu navegador te muestre lo que va a pintar en tu muro, también puedes decirle al usuario que vas a escribir en su muro.

if (puntuacion!=0) 
{indiceacierto=Math.round(puntuacion)
} 
else{indiceacierto=0} 
 
 
if(indiceacierto<=100&&indiceacierto>=90) 
{
mensaje="...¡¡¡Friki medalla de oro!!!...";
photillo="https://www.codifica.me/public_html/signos/index2_pics/5.JPG";
} 
 
if(indiceacierto<89&&indiceacierto>=75)
{
mensaje="¡¡Friki medalla de plata!!";
photillo="https://www.codifica.me/public_html/signos/index2_pics/4.JPG";
} 
 
if(indiceacierto<74&&indiceacierto>=60)
{
mensaje="¡Friki medalla de bronce!"
photillo="https://www.codifica.me/public_html/signos/index2_pics/3.JPG";
} 
if(indiceacierto<59&&indiceacierto>=30)
{
mensaje="Has estado cerca pero aún te queda";
photillo="https://www.codifica.me/public_html/signos/index2_pics/2.JPG";
} 
if(indiceacierto<29&&indiceacierto>=1)
{
mensaje="Trata de ser más Friki";
photillo="https://www.codifica.me/public_html/signos/index2_pics/1.JPG";
} 
 
if(contestadas==0)
{
mensaje="¡oooh, esperaba más Luke!";
photillo="https://www.codifica.me/public_html/signos/index2_pics/1.JPG";
} 
 
alert("Eres el "+puntuacion+"% de FRIKI." + ".\n\nHas dejado sin contestar "+ nocontesta+".\n\n\n\n"+mensaje+". ");
mencompleto="Eres el "+puntuacion+"% de FRIKI." + ".\nHas dejado sin contestar "+ nocontesta+".\n\n"+mensaje+".";
//alert(mencompleto);
}

Este input es el botón que hará que la función que examina los resultados y la función que publica en el muro del usuario se ejecuten.

1	<input type="button" name="submit" value="RESULTADOS" onclick="examinar();PublishWall(mencompleto,photillo);">

La función para publicar

Esta es la función que se encarga de publicar en el muro del usuario, y se la llama desde el botón Resultados después de ejecutar la funcion examinar(), con esta función (PublishWall(mencompleto,photillo)) haremos una publicación en el muro que contendrá el mensaje que hemos creado y la imagen que quieres que se muestre.

function PublishWall(mencompleto,photillo) { 
   var publish = {
     method: 'stream.publish',
     message: mencompleto,   
     picture : photillo,  
     link : 'https://apps.facebook.com/afrikitest',
     name: 'Prueba Friki Test',
     caption: 'Tu Test en 2 minutos',
     description: 'El único Test realizado por profesionales.',
     actions : { name : 'Pruébalo!!', link : 'https://apps.facebook.com/afrikitest'}
   };
 
   FB.api('/me/feed', 'POST', publish, function(response) {  
       document.getElementById('confirmMsg').innerHTML = 
              'A post had just been published into the stream on your wall.';
   });
};

Todo el código es fácilmente personalizable para que lo podáis adaptar según vuestros requisitos, aquí os dejo un ejemplo funcionando para que lo probéis.

El link https://apps.facebook.com/afrikitest/

En este ejemplo de test para facebook, te preguntarán por películas de culto, series, etc (Matrix, Bola de dragon, Big Bang theoric) Que mostrarán tu lado más friki.