Javascript quiz maken

[Jantje2000]

Goedenavond,

Ik ben momenteel bezig aan een app, met Visual Studio 2015. Ik gebruik hierbij de plugin Apache Cordova Apps. Met deze plugin kun je Android, IOS, en Windows apps maken. Ik ben nu bezig met een soort quiz, maar dat lukt me niet helemaal. Ik wil dat als je het antwoord invult de app kijkt of het antwoord goed is. Als het antwoord goed is gaat bij de variabele goed een punt er bij.
Alleen lukt het me dus niet om de app te laten checken of het antwoord goed is. Ik heb een prompt venster aangemaakt met javascript, maar dat werkt jammer genoeg niet op Android. Mijn plan was om die vraag een variabele te geven. Het antwoord wordt op die variabele ingevuld. Als die variabele een goed antwoord is komt er die punt bij.
Misschien is er iemand die weet hoe ik dit kan realiseren zonder het prompt commando te gebruiken. Ik heb al wel gekeken naar een input zoals je bij HTML hebt, maar daarbij lukt het variëren me ook niet.

Heeft iemand misschien een idee hoe ik dit kan oplossen?

Bij voorbaat dank,
Jan

[Verwijderd]

Klein vraagje; ben je vanuit scratch aan het bouwen of gebruik je een derde partij script?

[ard1998]

Je kan wat proberen met buttons die je stijl geeft. (ik ga er voor het gemak van uit dat je een html5 App maakt met behulp van intel de of iets soortgelijks)

[ Voor 50% gewijzigd door ard1998 op 21-03-2016 21:17 ]

[b2vjfvj75gjx7]

• http://lmgtfy.com/?q=javascript+based+quiz+app

Genoeg resultaten waarmee je een bestaand framework kan inladen binnen Cordova.

Prompts kan je ook wel krijgen, via een Cordova plug-in - maar hoe minder, hoe beter

Als je echt open vragen wilt stellen, dan kan je dat natuurlijk ook gewoon via een <input> field doen en de ingevoerde waarde controleren tegen het goede antwoord? (wel even rekening houden met hoofdletters, spaties, etc...).

Of je houdt het simpel - http://odhyan.com/quizapp-angular/

---

- edit - @ard1998 styling heeft toch niets met validatie te maken? Hooguit style je iets, ná de validatie, zodat je een visuele indicator hebt van de correctheid van de gegeven response... maar dan nog moet je het eerst valideren

---

- edit 2 - Pas op met open vragen waarbij users zelf input kunnen invoeren; ook een Cordova app kan je daarmee laten crashen (zeker als je hun antwoord weer terug schrijft in de DOM bijvoorbeeld)... altijd user input sanitizen

[ Voor 30% gewijzigd door b2vjfvj75gjx7 op 21-03-2016 21:26 ]

[ard1998]

b2vjfvj75gjx7 schreef op maandag 21 maart 2016 @ 21:23:

- edit - @ard1998 styling heeft toch niets met validatie te maken? Hooguit style je iets, ná de validatie, zodat je een visuele indicator hebt van de correctheid van de gegeven response... maar dan nog moet je het eerst valideren

je hebt gelijk, ik had de forumpost wat beter moeten lezen. mischien word het tijd dat ik leer om koffie te drinken (ik heb gehoord dat het een veelgenuttigd product is in het vak )

[b2vjfvj75gjx7]

ard1998 schreef op maandag 21 maart 2016 @ 21:51:
[...]


je hebt gelijk, ik had de forumpost wat beter moeten lezen. mischien word het tijd dat ik leer om koffie te drinken (ik heb gehoord dat het een veelgenuttigd product is in het vak )

Koffie of rum... of koffie én rum... of rum, of koffie.. of

[CH4OS]

Kun je niet beter server-side bijhouden hoeveel punten iemand heeft, door middel van een sessie? Anders is het voor slimmeriken best makkelijk om aan te passen.

[b2vjfvj75gjx7]

CptChaos schreef op maandag 21 maart 2016 @ 22:19:
Kun je niet beter server-side bijhouden hoeveel punten iemand heeft, door middel van een sessie? Anders is het voor slimmeriken best makkelijk om aan te passen.

De wrapper is een native Cordova boilerplate; als user heb je dan geen toegang tot de core assets...

Ja, als je een Android device root of een WP / WM bricked Maar voor een quiz op JS niveau denk ik niet dat iemand die moeite gaat nemen

[Unito]

@Jantje2000 Ben je al verder met je project? Ik heb een vergelijkbaar plan als jij en ben wel benieuwd of het je gelukt is!

Tot nu toe voel ik me wel een beetje overweldigd door alle termen (Cordova, Javascript, Angular, CSS etc). En ja met google kom je een eind maar je kan ook verdwalen :-).

[ Voor 41% gewijzigd door Unito op 17-06-2016 12:59 ]

[Jantje2000]

Unito schreef op vrijdag 17 juni 2016 @ 12:47:
@Jantje2000 Ben je al verder met je project? Ik heb een vergelijkbaar plan als jij en ben wel benieuwd of het je gelukt is!

Nee het is me nog niet gelukt. Maar waarschijnlijk ga ik het binnenkort met Python doen. Daarmee is het waarschijnlijk makkelijker en ikben momenteel Python aan het leren. Maar misschien kunnen we een keer samenwerken? Of in ieder geval tips geven? Stuur maar gewoon een PM.

[q-enf0rcer.1]

Flanst even een voorbeeldje in elkaar met AngularJS :

Toevoegen in je controller:

code:

$scope.score = 0;
$scope.questions = [
    {
        question: "1+1=?",
        answers: [
            "1+1=2",
            "1+1=3",
            "1+1=4"
        ],
        correct_answer_index: 0
    },
    {
        question: "2+2=?",
        answers: [
            "2+2=5",
            "2+2=22",
            "2+2=4"
        ],
        correct_answer_index: 2
    }
];

Toevoegen in je view:

code:

<ul>
    <li ng-repeat="question in questions">
        <span>{{question.question}}</span>
        <select ng-model="question.answered" ng-hide="question.answered">
            <option ng-repeat="answer in question.answers" value="{{$index}}">
                {{answer}}
            </option>
        </select>
        <span ng-if="question.correct_answer_index == question.answered" ng-init="$parent.$parent.score=score+1">Je antwoord is goed</span>
        <span ng-if="question.answered && question.correct_answer_index != question.answered">Je antwoord is fout</span>
    </li>
</ul>
<p>Score: {{score}}</p>

Getest op: https://plnkr.co/edit/x2uaFfAIN758P2nhpH7P?p=preview

[ Voor 5% gewijzigd door q-enf0rcer.1 op 17-06-2016 19:27 ]

[Jantje2000]

Hartelijk dank
Ik ben hier erg blij mee q-enf0rcer.1

[q-enf0rcer.1]

Geen dank. Mocht je nog vragen hebben dan hoor ik het wel.

[Unito]

q-enf0rcer.1 schreef op vrijdag 17 juni 2016 @ 20:45:
Geen dank. Mocht je nog vragen hebben dan hoor ik het wel.

Dank! En Jantje ook!

Mijn plan is als volgt:
Doel: Multiple Choice Quiz App met examentraining voor een programmeerexamen.
Toelichting: Een relatief simpele app maken die beschikbaar is op IOS en Android. De app bevat zo'n 250-500 tekstuele multiple choice vragen waarbij 1 van de 4 antwoorden goed is en de anderen fout. De vragendatabase zal weinig (verwachting 1x per jaar ge-update worden).
Mijn app is beter dan bestaande apps om de volgende redenen.
- Mijn app is actueel (dus sluit aan bij het huidige examen).
- MIjn app onderbouwt het juiste antwoord
- Mijn app bevat geen fouten (ik ga en vragen goed checken en ik ga ook iets inbouwen zodat gebruikers fouten kunnen melden bv via e-mail)
- Ik gebruik een monospaced lettertype (relevant omdat de app vragen over posities van tekens bevat).

Keuze voor software/talen::
Ik ga gebruik maken van javascript, html5 en cordova

Mijn huidige vraagtekens. Advies is meer dan welkom :-)
- Hoe krijg ik de vragen en antwoorden in een database ? Ik zat te denken om de vragen en antwoorden in een Excelbestand op te nemen. Deze op te slaan als CSV en vervolgens inlezen in een SQL database (met bv PHPmyadmin). Is dit logisch of zijn er betere methodes :-)?
- Waar laat ik de database met vragen? Volgens mij heb ik 3 opties.
1) De database met vragen en antwoorden meeleveren in de APK in een database
2) Of de app zo programmeren dat deze een database van internet aanroept?
3) De vragen hard inprogrammeren in de code.
Bij de eerste optie is het voordeel dat de app zonder internet kan werken en daarbij denk ik dat een database uiteindelijk beter is dan de vragen en antwoorden hard incoderen (zeker gezien het aantal van 250-500 vragen). Momenteel neig ik daarom naar de eerste optie.
- Voor wat betreft de user interface twijfel ik nu tussen 3 opties voor het invoeren van antwoorden:
1) met een invulrondje (radiobutton) ga maken dat je aan kan vinken.
2) Of dat je gewoon het juiste antwoord kan aantikken.
3) Of dat ik onder de antwoorden 4 knoppen zet met A,B,C en D.
Het invulrondje is voor mobile misschien niet zo handig. Het aantikken van de vraag is misschien onhandig omdat je voor sommige vragen een beetje moet scrollen. Je hebt dan kans dat je per ongeluk een fout antwoord ingeeft. Ik neig daarom naar de 4 knoppen met A, B, C en D
- Ik wil gebruikers de vragen in willekeurige volgorde aanbieden. Ik zat te denken om alle vragen een random nr mee te geven als de app opgestart wordt. Weet iemand hier misschien wat anders voor?

De volgende uitdagingen ga ik nog tackelen:
- De antwoorden in een willekeurige volgorde zetten (zodat
- Een tellertje om de score bij te houden (percentage goed)
- Een proefexamen met 50 vragen en een tijdsklokje inbouwen.

Tot zover:
- Wat filmpjes gekeken over Cordova en Angular JS,
- GIT, Cordova en Android Studio geinstalleerd.

Mochten jullie tips/feedback hebben dan hoor ik het graag.

[ Voor 88% gewijzigd door Unito op 19-06-2016 21:57 . Reden: toelichting ]

[henk1994]

Ik zou eerst een nieuw topic starten met deze vragen, is het voor anderen ook wat makkelijker om te vinden.

Op de website van Cordova kun je informatie vinden over Cordova: https://cordova.apache.org/docs/en/latest/. Zie bijvoorbeeld het kopje 'Store data' over het gebruik van een database mbv Localstorage of Websql.

Wat ik zou doen met je antwoorden is vier knoppen maken met de antwoorden, en een aparte 'submit' button maken. Dan kan je je altijd nog bedenken als je een antwoord gekozen heb.

Unito schreef op vrijdag 17 juni 2016 @ 22:08:
[...]

Dank! En Jantje ook!

Mijn plan is als volgt:
Doel: Multiple Choice Quiz App met examentraining voor een programmeerexamen.
Toelichting: Een relatief simpele app maken die beschikbaar is op IOS en Android. De app bevat zo'n 250-500 tekstuele multiple choice vragen waarbij 1 van de 4 antwoorden goed is en de anderen fout. De vragendatabase zal weinig (verwachting 1x per jaar ge-update worden).
Mijn app is beter dan bestaande apps om de volgende redenen.
- Mijn app is actueel (dus sluit aan bij het huidige examen).
- MIjn app onderbouwt het juiste antwoord
- Mijn app bevat geen fouten (ik ga en vragen goed checken en ik ga ook iets inbouwen zodat gebruikers fouten kunnen melden bv via e-mail)
- Ik gebruik een monospaced lettertype (relevant omdat de app vragen over posities van tekens bevat).

Keuze voor software/talen::
Ik ga gebruik maken van javascript, html5 en cordova

Mijn huidige vraagtekens. Advies is meer dan welkom :-)
- Hoe krijg ik de vragen en antwoorden in een database ? Ik zat te denken om de vragen en antwoorden in een Excelbestand op te nemen. Deze op te slaan als CSV en vervolgens inlezen in een SQL database (met bv PHPmyadmin). Is dit logisch of zijn er betere methodes :-)?
- Waar laat ik de database met vragen? Volgens mij heb ik 3 opties.
1) De database met vragen en antwoorden meeleveren in de APK in een database
2) Of de app zo programmeren dat deze een database van internet aanroept?
3) De vragen hard inprogrammeren in de code.
Bij de eerste optie is het voordeel dat de app zonder internet kan werken en daarbij denk ik dat een database uiteindelijk beter is dan de vragen en antwoorden hard incoderen (zeker gezien het aantal van 250-500 vragen). Momenteel neig ik daarom naar de eerste optie.
- Voor wat betreft de user interface twijfel ik nu tussen 3 opties voor het invoeren van antwoorden:
1) met een invulrondje (radiobutton) ga maken dat je aan kan vinken.
2) Of dat je gewoon het juiste antwoord kan aantikken.
3) Of dat ik onder de antwoorden 4 knoppen zet met A,B,C en D.
Het invulrondje is voor mobile misschien niet zo handig. Het aantikken van de vraag is misschien onhandig omdat je voor sommige vragen een beetje moet scrollen. Je hebt dan kans dat je per ongeluk een fout antwoord ingeeft. Ik neig daarom naar de 4 knoppen met A, B, C en D
- Ik wil gebruikers de vragen in willekeurige volgorde aanbieden. Ik zat te denken om alle vragen een random nr mee te geven als de app opgestart wordt. Weet iemand hier misschien wat anders voor?

De volgende uitdagingen ga ik nog tackelen:
- De antwoorden in een willekeurige volgorde zetten (zodat
- Een tellertje om de score bij te houden (percentage goed)
- Een proefexamen met 50 vragen en een tijdsklokje inbouwen.

Tot zover:
- Wat filmpjes gekeken over Cordova en Angular JS,
- GIT, Cordova en Android Studio geinstalleerd.

Mochten jullie tips/feedback hebben dan hoor ik het graag.

[Unito]

Thanks voor de link naar informatie @henk1994 Die aparte submit button ga ik zo doen.

update 22-6-2016:
Ik ben inmiddels iets verder.
- Ik heb een .db bestand gemaakt met daarin vragen en antwoorden met SQLiteBrowser. Binnen de Cordova code ben ik nu aan het proberen om connectie te leggen met de database. Ik ben even vastgelopen maar dat komt later wel.
- Met ionic heb ik icoontjes gemaakt voor verschillende schermen.
- Ik heb het lettertype van de app veranderd.

Wat ik me nog afvroeg:
Ik lees dat ik alleen apps voor IOS kan genereren vanaf een Mac. Weet iemand hoeveel werk je nog moet doen om uiteindelijk ook de app vanuit de Mac te genereren? Komt het dan alleen nog maar neer op wat software installeren zoals XCODE en Cordova of moet ik ook hele stukken code javascript, html schrijven? (ja ik heb er wat naar gegoogled maar vond niet een duidelijke beschrijving hiervan.)

[ Voor 86% gewijzigd door Unito op 22-06-2016 22:13 . Reden: update 22-6-2016 ]

[henk1994]

Unito schreef op maandag 20 juni 2016 @ 19:09:
Thanks voor de link naar informatie @henk1994 Die aparte submit button ga ik zo doen.

update 22-6-2016:
Ik ben inmiddels iets verder.
- Ik heb een .db bestand gemaakt met daarin vragen en antwoorden met SQLiteBrowser. Binnen de Cordova code ben ik nu aan het proberen om connectie te leggen met de database. Ik ben even vastgelopen maar dat komt later wel.
- Met ionic heb ik icoontjes gemaakt voor verschillende schermen.
- Ik heb het lettertype van de app veranderd.

Wat ik me nog afvroeg:
Ik lees dat ik alleen apps voor IOS kan genereren vanaf een Mac. Weet iemand hoeveel werk je nog moet doen om uiteindelijk ook de app vanuit de Mac te genereren? Komt het dan alleen nog maar neer op wat software installeren zoals XCODE en Cordova of moet ik ook hele stukken code javascript, html schrijven? (ja ik heb er wat naar gegoogled maar vond niet een duidelijke beschrijving hiervan.)

Het idee van Cordova (en andere cross platform technieken) is dat je de app een keer schrijft voor android en ios. Omdat het in JavaScript en HTML geschreven is heb je enkel een webview nodig om de inhoud te tonen. Als je het goed heb gedaan (en eventueel heb getest op een iPhone) hoef je er vrijwel niets meer aan te veranderen.

[Unito]

Dank @henk1994!dat is goed nieuws !