Tutorial 8: Multiple Choice Quiz

Follow

Comments

28 comments

  • Avatar
    Kay

    Hi Everyone,

    This is my first post so please be gentle. I have followed all of the instructions above, and when I run the application it does not do anything (preview online) 

    I have copied and pasted the code into the code section at the top of the user interface. The only other place I can see to put code is in under the code tab under properties of a widget for example, but it says here API, I dont think it goes here. When I looked in there the documentation talks about how to code widgets etc...

     

    I would greatly appreciate if anyone could advise me on how to get this working please. Has anyone else managed to get this quiz to work successfully? Kieron if you read this message I would really value your help right now on this.

     

    I look forward to your responses.

     

    K

  • Avatar
    kieron

    Hi Kay,

    You are right that the code here should be pasted into the main "Code" tab at the top of the interface. The "code name" text fields on the right-hand side are where you should put all the relevant "ui.___" values mentioned in Steps 1-4.

    When you say it doesn't do anything, can you be more specific? For example, when you tap the Start button, is it not starting the game? If you are able to, a screenshot might help us figure out the issue.

    Thanks

  • Avatar
    Kay

    Hi Kieron

     

    Many thanks for the quick response, I have attached a file which demonstrate the screen I am stuck on.

     

    In short the app starts, I then click on start and am taken to the screen attached. No question is displayed and if you click on any of the options nothing happens. I am very greatful for your support on this.

    Kind regards

    K




    2nd screen.jpg
  • Avatar
    kieron

    Hi Kay,

    Just a few things to check first:

    • Does your "Start" button have the "tapped function" of "startGame"?
    • Does the text that should be a question have the "code name" of "ui.question"?
    • Can you double-check that the "DATA" section in your code is present at the bottom, and has a closing square-bracket and semi-colon at the end?

    If none of these are working, could you let me know your App Number (number at the end of the address bar when editing your app), and I'll take a look.

    Thanks

  • Avatar
    Kay

    Hi Kieron

    Thanks for your reply. I have got it working now, thanks to you. Point 1 and 2 were the issue in addition to me not naming the functions in buttons correctly. I went through it very quickly when putting it all together. Thanks for your very quick replies, it is very much appreciated.

    BTW if I wanted to learn how to make more advanced apps, could you point me in the right direction please. I have used MIT appinventor and do not like it, it is very buggy indeed. 

     

    Thanks in advance

     

    K

  • Avatar
    kieron

    That's no problem - glad it's working now.

    In terms of more advanced apps, it depends what you're looking to achieve really. We're working on new tutorials and blog posts exploring how you can add different functionality to your apps, though if you had specific ideas you wanted to try, it's probably best to post questions in the forum - and we do base our new content on discussions held here too.

    Hope that helps

  • Avatar
    Ajay Kumar Singh

    hi kieron when i run preview online and click start button, it says "ui.question.text is not a function, error on line 40". Can you please help

     

    thanks in advance

  • Avatar
    kieron

    Hi Ajay,

    That suggests that the label for your question (in Step 2) doesn't have the correct codename. It should be "ui.question" (no quote marks). The name needs to be exact for the code to work.

    Hope that helps, if not - let me know the app number (number at the end of the address bar when editing your app), and I'll take a look.

  • Avatar
    Ajay Kumar Singh

    Hi kieron

    Thanks for the reply... ya I had made that mistake, thanks for pointing it out.. Its working fine now

  • Avatar
    zhaomeng

    Hi, Kieron,

    if i want to change the problem part in the multiple quiz to picture rather than text, what change should I change in the code?

  • Avatar
    kieron

    Hi,

    This is an example of how to change the above code to use all image questions, instead of text, follow these steps:

    • In the Files tab, create a folder called "images" (this will make the files in your app easier to manage as it grows)
    • Inside this folder, upload images for each of your questions. These can be named anything unique, but a format like "question1.png" may help you manage the code better
    • In the Code tab, update your data structure to remove "text", replacing with an "image" property that is the path to your image file for each question. In a format like this:
    var data = [
      {    image: "images/question1.png",
        options:[
          "Tokyo",
          "Berlin",
          "Helsinki",
          "Paris"
        ],
      answer:3
     },
    // etc. ...
    • Update each of your questions like this, with the relevant image file path in each question
    • In your nextQuestion function, replace this line:
    ui.question.text(q.text);
    • ...with this:
    ui.questionImage.backgroundImage(q.image);
    • In the Layout tab, on the Question page, remove the "Question?" label
    • Create an image widget, with the codename "ui.questionImage" (you can format this as needed)
    • Run your app, this should now have image questions, instead of text

    Hope that helps

  • Avatar
    zhaomeng

    Thank you so much, it really helps.

  • Avatar
    kieron

    Hi Seth,

    It sounds like you already have a widget with the code name "ui.question", and as all code names must be unique, the system is auto-updating it to make sure there isn't a duplicate.

    For the error, what is the app number (number at the end of the URL when editing)? I can take a look at the code then, to help diagnose it.

    Thanks

  • Avatar
    Seth

    I got it. I accidentally gave the page a code name. The problem is always 15" away from the screen lol. Thanks for responding!

  • Avatar
    kieron

    Hi Seth,

    Glad it's working now!

  • Avatar
    Marleen

    Hi,

    When I tap the start button, I get the same error as Seth did: 

    JavaScript error TypeError: null is not an object (evaluating 'l.length') (file:///var/containers/Bundle/Application/AB3E03C1-AAEB-4870-8E5E-5F6AA5C31AB8/afplayer.app/engine/js/internal/Utils.js?_cache=1465400958851, Line 240)

    What was described wasn't the problem I think, I checked both the options. Also, i don't have a 240th line in my code..

    Has anyone an idea what could be the problem?

  • Avatar
    kieron

    Hi Marleen,

    These errors usually come from an incorrect codename on one of the widgets or pages. The first thing is to check all the widgets you've added have the relevant codename specified above. If that's not working, let me know the app number (number at the end of the editing URL), and I'll take a look.

    Also, to answer your question about 240th line, when the apps run, they're actually running other code that isn't accessible from the Code tab, which handles the logic that isn't specific to your app (e.g. page navigation, location) - and errors in the Code tab can flow through to this.

    Hope that helps.

  • Avatar
    Marleen

    Thanks for the fast response! I couldn't find an error, so I deleted everything and followed the tutorial again, and that worked.

    Now i have another issue: if I tap the correct answer, i still get 'Wrong!'. Any ideas? Thanks!

  • Avatar
    kieron

    Hi Marleen,

    I'd check that the data structure (at the end of the Code) contains the right "answer" attribute, and that the buttons have the relevant codenames too.

    If that doesn't solve it, let me know the app number and I can take a look.

    Thanks

  • Avatar
    Marleen

    Got it! Thank you!

  • Avatar
    jezz96

    Hi,

     

    I just have a quick question. I want to add more questions to my quiz but i don't understand which code i have to copy and edit to add more questions.

    Can you help me?

     

    Thanks in advance!

  • Avatar
    kieron

    Hi,

    No problem, I'll try and explain the structure of the data, so you can extend it as much as you like.

    This snippet contains the variable declaration, as well as the start & end square brackets of an array:

    var data = [

    {
    text:"What is the capital city of France?",
    options: [
    "Tokyo",
    "Berlin",
    "Helsinki",
    "Paris"
    ],
    answer:3
    }

    ];

    In this particular array, we're storing a single Object (seen by the { and } characters). This object contains various data, that relates to the questions:

    • "text" displays the question
    • "options" is an array of possible answers (which are assigned to the vertical buttons in order)
    • "answer" has the index of the correct answer, within the "options" array (index is the position in the list). It's important to know that indexes of arrays start at 0 - which is why answer 4, has an index of 3.

    Adding a new question is a case of copying & pasting the object, making sure that all objects are separated by a comma, like this:

    var data = [

    {
    text:"What is the capital city of France?",
    options: [
    "Tokyo",
    "Berlin",
    "Helsinki",
    "Paris"
    ],
    answer:3
    },
    {
    text:"What is the capital city of France?",
    options: [
    "Tokyo",
    "Berlin",
    "Helsinki",
    "Paris"
    ],
    answer:3
    }

    ];

    Then, you can edit the data in each question to update the quiz. It may help to add extra empty lines between questions, and to index the sections properly, to make it easier to read.

    This kind of format is called JSON, which is talked about here, for reference: http://www.w3schools.com/json/

    Hope that helps

  • Avatar
    jezz96

    Hi,

     

    My code is exactly the same, but the if i click on the button for the next question, nothing happens. Do i have to add a blank page, or will the code make a new page? Because right now, it won't work...

     

  • Avatar
    kieron

    Hi,

    It's worth checking that you have all the widget codenames entered correctly, as in the tutorial, as these can be more difficult to spot than code errors.

    If it's still not working, let me know the app number (number at the end of the URL when editing), and I'll take a look.

    Thanks

  • Avatar
    Aniek

    Hi,

    My quiz worked fine for a couple of days. But this morning he suddenly gives a error 'Null is not an object (evaluating l.length)' Error on line 240'.

    I don't even have a line 240

    This code use to work perfectly, so now im wondering if it's a bug or if it's something in my own code?




    Schermafbeelding 2016-06-10 om 11.05.53.png
  • Avatar
    kieron

    Hi Aniek,

    I've responded to your question in your other post: https://appfurnace.zendesk.com/entries/109923866--Null-is-not-an-object-evaluating-l-length-Error-on-line-240-

    Thanks

  • Avatar
    jezz96

    Yesterday everything worked out fine but now i get the same error message everytime i want to test my quiz. I can't find out why. My app number is 40412

    Thanks!

  • Avatar
    kieron

    Hi,

    It looks like you have two variables called "data", and the last one in the code overwrites the first one.

    If you rename the second data variable to something else (e.g. "data_quiz"), and then in the other places where you do want to use that variable, that should solve the issue.

Please sign in to leave a comment.

Powered by Zendesk