Le divinità che non ti aspetti: non è un ugonotto e neanche l’ancillotto, ma un oggetto JSON gestibile con Ajax e Jquery!

Strano che per iniziare un articolo di tecnologia e di formazione qualcuno debba partire da indirizzi come https://it.wikipedia.org/wiki/Stephen_King , sarà per la situazione politica italiana sempre in bilico e tesa a richiamare l’attenzione del terribile Pennywise, eppure chi ha giocato scacchi agonistici sa bene che quello che fa la differenza quando ci si scontra con un avversario sono le mosse a doppia funzionalità, in cui magari fai finta di difenderti passivamente per preparare una controffensiva dinamica memorabile (ma chi sei Renzi?!). Che ci azzecca Sthepen King o la Signora in Giallo con AJAX? All’ indirizzo https://umbriawaysemplifica.wordpress.com/2021/01/20/ma-allora-ha-fatto-anche-cose-buone-ma-chi-per-fortuna-ajax/ abbiamo introdotto l’argomento e anche studiato una funzione. Abbiamo capito che quando ci sono delle parentesi graffe coinvolte nel codice, siamo davanti a oggetti che hanno delle proprietà e dei valori. Doverosa introduzione perche se analizziamo un JSON che adesso andremo a fare modellandolo sul tema della didattica espressa, con informazioni legate al Maine di King, possiamo sfruttare delle armi formidabili nelle nostre web application che il più delle volte dimentichiamo come risorse. Ma partiamo dall inizio. In rete esistono numerosi validatori per oggetti JSON che potremmo definire oggetti che contengono delle proprietà con dei valori, per esempio uno a caso https://it.piliapp.com/json/validator/ . Quando noi abbiamo il nostro JSON non dobbiamo fare altro che darlo in pasto al validatore per vederci riconsegnato il risultato finale, ossia sapere se quello che abbiamo scritto è corretto ed é stato validato. Ora potremmo sfruttare queste risorse per rispondere a domande critiche per l’umanità, del tipo:

  • Ma é vero che le aragoste sono l’attrazione principale del Maine?
  • E’ vero che il re dell’ orrore non abita in un attico di New York e neanche in una villa a Malibù ma a Bangor nel Maine?
  • E’ vero che la Signora in Giallo ha ambientato le sue opere in una città reale del Maine che si chiama Cabot Cove?
  • Ma è vero che la tempesta perfetta con Clooney l’hannno girata nel Maine?
  • Ma è vero che se ti sei sposato e vai in viaggio di nozze il Maine è per te perfetto da visitare?
  • E’ vero che S.King oggi ha 73 anni perché è nato il 21 settembre 1947?

che cosa ci azzeccano queste domande con la formazione su AJAX? A domanda l’aspirante SIGNORE IN GIALLO LOCALE che ha ambizioni letterarie può rispondere, possiamo mettere in piedi un test con ajax, json e codeigniter! Il primo passo è creare un oggetto json quindi:

{
  "aragoste": "vero",
  "residenza": "vero",
  "signoraingiallo": "falso",
  "tempestaperfetta": "vero",
  "viaggiodinozze": "vero",
  "oversettanta": "vero"
}

il passo successivo é consolidare questo oggetto su un validatore on line qualsiasi se il risultato in output sarà un alert con la scritta: congratulazioni il tuo oggetto json è scritto bene, allora siamo pronti per preparare l’interfaccia che conterrà il quiz, ricordando che serve il collegamento a JQuery, quindi si procede in tale direzione:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test sul Maine di Sthepen King</title>
  <script src="percorsodascrivereperpuntareallalibreriajq/file.js"></script>
 </head>

<body>
<h2>Domande:</h2>
<ul>
<li>1. Ma é vero che le aragoste sono l'attrazione principale del Maine?</li>
<li>2. E' vero che il re dell' orrore non abita in un attico di New York e neanche in una villa a Malibù ma a Bangor nel Maine?</li>
<li>3. E' vero che la Signora in Giallo ha ambientato le sue opere in una città reale del Maine che si chiama Cabot Cove?</li>
<li>4. Ma è vero che la tempesta perfetta con Clooney l'hannno girata nel Maine?</li>
<li>5. Ma è vero che se ti sei sposato e vai in viaggio di nozze il Maine è perfetto da visitare?</li>
<li>6. E' vero che S.King oggi ha 73 anni perché è nato il 21 settembre 1947?</li>
</ul>


  <table>
  <tr>
    <td>domanda 1</td>
    <td id="aragoste"></td>
  </tr>
  <tr>
    <td>domanda 2</td>
    <td id="residenza"></td>
  </tr>
  <tr>
    <td>domanda 3</td>
    <td id="signoraingiallo"></td>
  </tr>
  <tr>
    <td>domanda 4</td>
    <td id="tempestaperfetta"></td>
  </tr>
    <tr>
    <td>domanda 5</td>
    <td id="viaggiodinozze"></td>
  </tr>
  <tr>
    <td>domanda 6</td>
    <td id="oversettanta"></td>
  </tr>
  <tr>
    <td colspan="2"><button>Pennywise response</button></td>
  </tr>
</table>
  <script>
  $(document).ready(
	function(){

		$("button").click(function(){

			$.ajax(
				{
					url: "http://nomedominio/nomecartellaprogetto/cartellafile/tuoidati.json",
					success: function(result)
					{
						$("#aragoste").text(result.aragoste);
						$("#residenza").text(result.residenza);
						$("#signoraingiallo").text(result.signoraingiallo);
						$("#tempestaperfetta").text(result.tempestaperfetta);
                       					$("#viaggiodinozze").text(result.viaggiodinozze);
						$("#oversettanta").text(result.oversettanta);
					}
				}
			);
		});

	}
);
</script>
<h2>Rispondendo correttamente a tutte le domande vinci un soggiorno premio nel Maine a casa del Re dell' horror o in alternativa puoi anche visitare il Senato!</h2>
</body>
</html>

Ovviamente se c’è qualcosa di interessante va analizzato dentro la funzione ajax che di fatto punta a un file sul server su una richiesta specifica (che é il click), poi verifica se l’operazione ha avuto successo per prelevare i contenuti e infine dice alle aree con nome e cognome che i suoi campi input vanno riempiti in un certo modo, ricevendo i dati stabiliti dalle istruzioni. Niente di trascendentale quindi! Per vedere l’effetto che fa dal vivo andare su: http://umbriawayformazione.altervista.org/ci_impossible_questions/index.php/aforismi/quiz

web design umbria
risultato finale

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...