Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Creating a quiz game using QML and js
QtWS25 Last Chance

Creating a quiz game using QML and js

Scheduled Pinned Locked Moved QML and Qt Quick
7 Posts 3 Posters 3.6k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    jr_jags
    wrote on last edited by
    #1

    i have this qml file that contains text and mousearea and a connection to my js file

    @import QtQuick 1.0
    import "random.js" as Random

    Rectangle {
    width: 360
    height: 360

    Text {
        id: display
        x: 76
        y: 110
        text: Random.question();
        anchors.verticalCenterOffset: -63
        anchors.horizontalCenterOffset: -77
        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
        anchors.centerIn: parent
    }
    
    
    
    
    MouseArea {
        id: mouse_area1
        x: 18
        y: 303
        width: 100
        height: 43
        onClicked: {
    
        }
    }
    
    MouseArea {
        id: mouse_area2
        x: 35
        y: 149
        width: 100
        height: 22
        
    }
    
    MouseArea {
        id: mouse_area3
        x: 35
        y: 193
        width: 100
        height: 22
    

    onClicked: {
    Random.check1();
    }
    }

    MouseArea {
        id: mouse_area4
        x: 35
        y: 243
        width: 100
        height: 17
    }
    
    Text {
        id: text1
        x: 277
        y: 309
        width: 80
        height: 20
        text: "you earned"+value,"pet coin/s" //i want to show this message if it click mousearea3 
        font.pixelSize: 12
    }
    

    }
    @

    this is my js file
    @
    var score = 0;
    function question()
    {
    var quiz=new Array("The tallest mountain is:")

    var wa=quiz[Math.floor(quiz.length*Math.random())]
    return wa
    

    }

    function check1()
    {
    if (mouse_area3.pressed = true) //Am i using the right function for mouse_area3 which is pressed?
    {
    score= 1
    }
    else{
    score = 0
    }
    }
    @
    for example mouse_area 3 is the answer, i want to execute my function check1 in my js file
    and will show a text that i had this score.

    Please help me in my problem

    1 Reply Last reply
    0
    • S Offline
      S Offline
      Slocan
      wrote on last edited by
      #2

      The easiest is probably to pass an argument to your check1 function. For example:
      @onClicked: {
      Random.check1(3);
      }@
      and then the function itself:
      @function check1(mouse_area)
      {
      if (mouse_area == 3) ...
      @

      1 Reply Last reply
      0
      • J Offline
        J Offline
        jr_jags
        wrote on last edited by
        #3

        i have another question, how can i display the scrore if it gets the correct answer,

        @ MouseArea {
        id: mouse_area3
        x: 35
        y: 193
        width: 100
        height: 22
        onClicked: {
        Random.check1(3);
        text1.visible = true;
        }
        }
        ........

        //This is the text that will show the earned coin for every correct answer

        Text {
        id: text1
        x: 277
        y: 309
        width: 80
        height: 20
        text: +Random.score(),"pet coin/s"
        font.pixelSize: 12
        visible: false
        }
        @

        @function score()
        {
        var value =0;
        }

        function question()
        {
        var quiz=new Array("The tallest mountain is:")

        var wa=quiz[Math.floor(quiz.length*Math.random())]
        return wa
        

        }

        function check1(mouse_area)
        {
        if (mouse_area == 3)
        {
        value = +1
        }
        else{
        value = 0
        }
        }
        @

        1 Reply Last reply
        0
        • N Offline
          N Offline
          nhojyer07
          wrote on last edited by
          #4

          My thoughts on this..

          instead of declaring a variable value, you can initialize a new property in your Rectangle:

          @Rectangle {
          id: rect
          property int score: 0

          ...code
          Component.onCompleted: Random.ask();
          }@

          then:

          @ Text {
          id: display
          x: 76
          y: 110
          text: ""
          anchors.verticalCenterOffset: -63
          anchors.horizontalCenterOffset: -77
          wrapMode: Text.WrapAtWordBoundaryOrAnywhere
          anchors.centerIn: parent
          }
          MouseArea {
          id: mouse_area1
          x: 18
          y: 303
          width: 100
          height: 43
          onClicked: Random.check(0);
          }

          MouseArea {
              id: mouse_area2
              x: 35
              y: 149
              width: 100
              height: 22
              onClicked: Random.check(1);
          }
          

          MouseArea {
          id: mouse_area3
          x: 35
          y: 193
          width: 100
          height: 22
          onClicked: Random.check(2);
          }
          MouseArea {
          id: mouse_area4
          x: 35
          y: 243
          width: 100
          height: 17
          onClicked: Random.check(3);
          }@

          your JS can have:

          @var questions = [
          ["q1"]["c1", "c2", "c3", "c4"][0],
          ["q2"]["c1", "c2", "c3", "c4"][1],
          ["q3"]["c1", "c2", "c3", "c4"][2]
          ];
          var r;

          function ask() {
          r = Math.random(questions.length - 1);
          display.text = questions[r][0];
          }
          function check(answer) {
          if (answer == questions[r][2]) {
          rect.score += 1;
          display.text = rect.score + " pet coin/s"
          }
          }@

          the structure of questions array is:

          @[
          [question][choices][correct answer],
          [question][choices][correct answer],
          [question][choices][correct answer]@

          1 Reply Last reply
          0
          • N Offline
            N Offline
            nhojyer07
            wrote on last edited by
            #5

            sorry for double post.. please delete if necessary

            1 Reply Last reply
            0
            • J Offline
              J Offline
              jr_jags
              wrote on last edited by
              #6

              i just inserted what you added on my js file

              and return an error

              file:///C:/Users/Jagolino/randomquiz-build-simulator/qml/randomquiz/random.js:1: TypeError: Result of expression '["q1"]["c1", "c2", "c3", "c4"]' [undefined] is not an object.

              @

              var questions = [
              ["q1"]["c1", "c2", "c3", "c4"][0],
              ["q2"]["c1", "c2", "c3", "c4"][1],
              ["q3"]["c1", "c2", "c3", "c4"][2]
              ];

              var r;

              function ask() {
              r = Math.random(questions.length - 1);
              display.text = questions[r][0];
              }
              function check(answer) {
              if (answer == questions[r][2]) {
              rect.score += 1;
              text1.text = rect.score + " pet coin/s"
              }
              }
              @

              1 Reply Last reply
              0
              • N Offline
                N Offline
                nhojyer07
                wrote on last edited by
                #7

                lol me and my wrong use of Math.random();

                change
                @r = Math.random(questions.length - 1);@

                into
                @r = Math.random() * questions.length;@

                1 Reply Last reply
                0

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved