Adicionando feedback no TelEduc


A utilidade dessa função é criar essa tela de aviso apontada pela flecha, com a frase correta.
Facilita a implementação de línguas diferentes no sistema, visto que as frases são buscadas no banco de dados, este que está separado por id de linguas.

A classe FeedbackObject

A classe se encontra em: teleduc/cursos/aplic/bibliotecas/FeedbackObject.inc.php

<?php
class FeedbackObject{

  var $actions; //acoes possiveis
  var $listOfSentences;

  function FeedbackObject($theListOfSentences){
    $this->actions = array();
    $this->listOfSentences = $theListOfSentences;
  }

  function addAction($newAction, $caseTrue, $caseFalse){
    if((!isset($newAction)) || (!strcmp($newAction, ''))) return false;
    $this->action[$newAction] = array( 0 => $caseFalse, 1 => $caseTrue);
    return true;
  }

  function returnFeedback($theAction, $theCase){
    if(!$this->action[$theAction]) return false;

    if(!strcmp($theCase, 'true')){
      if(is_integer($this->action[$theAction][1])){
        echo("        mostraFeedback('".htmlentities(RetornaFraseDaLista($this->listOfSentences, $this->action[$theAction][1]))."', 'true');\n");
      }else{
        echo("        mostraFeedback('".htmlentities($this->action[$theAction][1])."', 'true');\n");
      }
    }else if(!strcmp($theCase, 'false')){
      if(is_integer($this->action[$theAction][0])){
        echo("        mostraFeedback('".htmlentities(RetornaFraseDaLista($this->listOfSentences, $this->action[$theAction][0]))."', 'false');\n");
      }else{
        echo("        mostraFeedback('".htmlentities($this->action[$theAction][0])."', 'false');\n");
      }
    }
    return true;
  }
}
?>

Quando o objeto é instanciado, passa-se por parâmetro a lista de frases($lista_frases), a $lista_frases nada mais é do que uma matriz de strings, onde estão guardadas todas as mensagens que o feedback pode mostrar.

$feedbackObject =  new FeedbackObject($lista_frases);

O método AddAction

function addAction($newAction, $caseTrue, $caseFalse){
        if((!isset($newAction)) || (!strcmp($newAction, ''))) return false;
        $this->action[$newAction] = array( 0 => $caseFalse, 1 => $caseTrue);
        return true;
}

Exemplo do Teleduc:

No arquivo: cursos>aplic>perguntas>perguntas.php

  // instanciar o objeto, passa a lista de frases por parametro
  $feedbackObject =  new FeedbackObject($lista_frases);

  //adicionar as acoes possiveis, 1o parametro 
  $feedbackObject->addAction("apagarItem", 76, 0);
  $feedbackObject->addAction("recuperarPergunta", 77, 0);
  $feedbackObject->addAction("moverItem", 78, 0);
  $feedbackObject->addAction("excluirItem", 79, 0);
  $feedbackObject->addAction("importarItem", 87, 0);
  $feedbackObject->addAction("novaPergunta", 14, 0);

O método addAction funciona para disponibilizar as ações para o uso na página.
Nesse caso, são aceitos:
.../cursos/aplic/perguntas/editar_assunto.php?cod_curso=1&cod_ferramenta=6&cod_assunto_pai=7&acao=novoAssunto&atualizacao=true#topo
Além de:
&acao=apagarItem
&acao=recuperarPergunta
&acao=moverItem
&acao=excluirItem
&acao=importarItem
&acao=novaPergunta

O parâmetro atualizacao tem apenas dois valores possíveis:
&atualizacao=true
&atualizacao=false

A função de javascript Iniciar() recebe os parâmetros do endereço via GET.

  echo("  function Iniciar()\n");
  echo("  {\n");
  $feedbackObject->returnFeedback($_GET['acao'], $_GET['atualizacao']);
  echo("  }\n\n");

Nessa função é acionado o método returnFeedback :

$feedbackObject->returnFeedback($_GET['acao'], $_GET['atualizacao']);

O método returnFeedback

function returnFeedback($theAction, $theCase){
    if(!$this->action[$theAction]) return false;

    if(!strcmp($theCase, 'true')){
      if(is_integer($this->action[$theAction][1])){
        echo("        mostraFeedback('".htmlentities(RetornaFraseDaLista($this->listOfSentences, $this->action[$theAction][1]))."', 'true');\n");
      }else{
        echo("        mostraFeedback('".htmlentities($this->action[$theAction][1])."', 'true');\n");
      }
    }else if(!strcmp($theCase, 'false')){
      if(is_integer($this->action[$theAction][0])){
        echo("        mostraFeedback('".htmlentities(RetornaFraseDaLista($this->listOfSentences, $this->action[$theAction][0]))."', 'false');\n");
      }else{
        echo("        mostraFeedback('".htmlentities($this->action[$theAction][0])."', 'false');\n");
      }
    }
    return true;
  }

Esse método verifica se a atualizacao é igual a true.
Se 'true', fundo verde de mensagem e chama frase da coluna [0] da matriz de string. Se 'false', fundo vermelho e chama frase da coluna [1] da matriz de string.

A função mostraFeedback é quem imprime na tela a mensagem e o fundo.

function mostraFeedback(string, success){

  document.getElementById('feedback').className="";
  if((success == 'true') || (success===true)){
    mudaBackgroundFeedback(0, true);
  }else if((success=='false') || (success===false)){
    document.getElementById('span_feedback').className="feedback_error";
  }

  document.getElementById('span_feedback').innerHTML=string;

  setTimeout("removeFeedback()", 30000);  //30 seg
  feedback_count++;
  window.location.hash="topo";
}

A função removeFeedback é acionada 30s após a mensagem aparecer. Escondendo tanto a mensagem quanto o fundo.
function removeFeedback(){
  feedback_count--;
  if(feedback_count > 0) return;
  document.getElementById('feedback').className="feedback_hidden";
}

Usando feedback class em ajax no TelEduc

Vejamos a função AlteraDadosAssuntoDinamic, ela troca o campo de assunto sem dar reload na página.

/* *********************************************************
  Funçao AlteraDados - Altera dinamicamente os campos do assunto.
  Entradas: $sock - sock de conexao,
            $cod_assunto - codigo do assunto a ser verificado.
  Saida:    true se o assunto existir, do contrario, false.
*/
function AlteraDadosAssuntoDinamic($id, $valor, $cod_assunto){
    $campo = ($id == "Assunto") ? "nome" : "descricao";

    $sock = Conectar($_GET['cod_curso']);
    $query = "update Pergunta_assuntos set $campo = '".VerificaStringQuery($valor)."' where cod_assunto = $cod_assunto";
    Enviar($sock,$query);
    Desconectar($sock);

    $sock = MudarDB($sock, "");
    $texto = RetornaFrase($sock, ($campo == "nome") ? 81 : 82 , 6);
    Desconectar($sock);

    $objResponse = new xajaxResponse('ISO-8859-1');
    $objResponse->addScriptCall("mostraFeedback", $texto , "true");
    return $objResponse->getXML();
}

O que ocorre é uma chamada da função mostraFeedback, pelo objeto xajax:

    $objResponse = new xajaxResponse('ISO-8859-1');
    $objResponse->addScriptCall("mostraFeedback", $texto , "true");
    return $objResponse->getXML();

A função AlteraDadosAssuntoDinamic já estava registrada em editar_assunto.php
  $objPerguntas = new xajax();
  $objPerguntas->registerFunction("AlteraDadosAssuntoDinamic");

Sendo assim, a função em php pode ser chamada por um função javascript qualquer, no caso, a função EdicaoTitulo:

    echo("        function EdicaoTitulo(id, b, state){
                    if (state == 'canc'){
                        /* TODO - Pegar o titulo velho! */
                        document.getElementById(b).innerHTML = document.getElementById(b).childNodes[0].value;
                        document.getElementById('renomear_'+id).onclick=function(){ AlteraTitulo(id) };
                    } else {
                        xajax_AlteraDadosAssuntoDinamic(id, document.getElementById(b).childNodes[0].value, $cod_assunto);
                        document.getElementById('renomear_'+id).onclick=function(){ AlteraTitulo(id) };
                        var novo = document.getElementById(b).childNodes[0].value;
                        document.getElementById(b).innerHTML = novo;
                        if (id == 'Assunto'){
                            var node = document.getElementById('topo_caminho').childNodes.length - 2; 
                            document.getElementById('topo_caminho').childNodes[node].innerHTML = novo;
                          } else {
                              document.getElementById('topo_descricao').innerHTML = novo
                          }

                    } 
                }");

Essa função é acionada por onclick no botão:

echo("          createSpan.onclick= function(){ EdicaoTitulo(id, 'tit_'+id, 'ok'); };\n");

feedbackCorte.png (12,724 KB) Bruno Buccolo, 08/05/2009 11:40