Kaartquiz

RichieCarmichael

<\/HEAD>

<\/A>

Map Quiz is een leuk JavaScript-gebaseerd geo-spel ontwikkeld door het Applications Prototype Lab. Het spel test je geografische kennis met zes willekeurig geselecteerde satellietbeelden. Bewijs dat je een geo-genie bent thuis, op school of op je werkplek!

Klik hier<\/A> om toegang te krijgen tot de live applicatie.

Klik hier<\/A> om de broncode te downloaden.<\/P>

Introductie<\/H2>
Dit project is een port van een applicatie die oorspronkelijk als Windows Store-applicatie is ontwikkeld.  Het doel van de applicatie is het presenteren van een leuk geografiegericht spel (of "geo-spel") gebaseerd op Esri<\/A>-technologie.  De applicatie is voornamelijk gebaseerd op Esri's ArcGIS API for JavaScript<\/A> en wordt aangedreven door ArcGIS Online<\/A> (AGOL) gehoste services voor scores en vragen.  Oorspronkelijk gebruikte de Windows Store-gebaseerde applicatie AGOL-gebaseerde authenticatie, in de JavaScript-editie hebben we ervoor gekozen Facebook-authenticatie te gebruiken om een groot publiek aan te spreken.<\/P>

Waarom Facebook?<\/H2>
Een van de motivaties van gamen is de spanning van competitie, persoonlijk of met anderen.  Om gebruikers te identificeren zodat ze hun scores of die van anderen konden volgen, was er een vorm van authenticatie nodig.  De voor de hand liggende keuze is AGOL.  AGOL is perfect wanneer samenwerking binnen de GIS-gemeenschap nodig is, maar een groot deel van het doelpubliek van deze applicatie heeft mogelijk geen AGOL-gegevens. Men kan stellen dat Facebook misschien niet volledig alomtegenwoordig is, maar zeker wel algemeen.  Daarom hebben we besloten Facebook en de Facebook API te gebruiken om gebruikers te authenticeren.  Om privacyzorgen te verminderen vraagt deze applicatie slechts een kleine subset van profielinformatie op en toont deze, namelijk iemands profielfoto, achternaam en initiaal van de voornaam.<\/P>Toegang tot Gehoste Services Beheren<\/H2>
De vragen, antwoorden en scores van het spel worden opgeslagen in twee ArcGIS Online gehoste feature services.  Gehoste services zijn eenvoudig te maken en bieden krachtige ruimtelijke zoekopdrachten.  Toegang tot gehoste services is echter ofwel onbeperkt, of beperkt tot een organisatie of tot gebruikers die tot specifieke groepen behoren.  Omdat dit spel bedoeld is voor niet-AGOL-gebruikers, hadden we een manier nodig om de toegang tot de gehoste services te beperken tot alleen de<\/EM> Map Quiz webapplicatie.

Dit werd bereikt door de app te registreren<\/A> op AGOL.  De resulterende app-id en secret werden vervolgens gebruikt in een webproxy die exclusieve toegang gaf tot de gehoste services alleen aan de Map Quiz webapplicatie.  De proxy en instructies hoe deze te implementeren zijn hier<\/A>.<\/P>

Draaien<\/H2>
De draaiende kaart op de landingspagina of het geleidelijke inzoomen bij elke vraag wordt bereikt met CSS3-animatie en de animo JavaScript-bibliotheek (zie hierboven).  In moderne browsers zijn de animatie-effecten soepel en consistent.  Wat betreft de draaiende kaart moesten de randen van de kaart naar buiten worden uitgebreid om te voorkomen dat er witte vlekken in de hoeken verschijnen.  Om dit te voorkomen hebben we negatieve marges toegepast met behulp van een Pythagorese berekening.  Een nadeel van de draaiende kaart is dat er af en toe naden in het beeld worden waargenomen.<\/P>Silverlight vs. JavaScript<\/H2>
Als voormalig Silverlight-ontwikkelaar ben ik aangenaam verrast door de prestaties en mogelijkheden van JavaScript-gebaseerde webapplicaties.  Tot nu toe ben ik nog geen enkele Silverlight-mogelijkheid tegengekomen die niet kon worden bereikt met HTML5\/_CSS3.  Het grootste probleem was de paradigmaverschuiving van Silverlights grote goed gedocumenteerde framework naar het werken met een half dozijn licht gedocumenteerde open source bibliotheken.<\/P>Gebruikte Bibliotheken<\/H2>
Zoals hierboven vermeld, is dit project gebaseerd op enkele open source bibliotheken, deze bibliotheken worden hieronder opgesomd en beschreven.<\/P>animo.js<\/A> door Daniel Raftery<\/A>Dit is een kleine maar krachtige bibliotheek die programmatische creatie en beheer van CSS-animaties biedt.<\/EM><\/LI><\/UL><\/DIV><\/>ArcGIS API for JavaScript<\/A> door <A href="http:\/\/www.esri.com\/

Nore8429

Hello, I'm trying to use the app but the button to log in doesn't appear. Can any one tell what it's wrong please.

Thank you.