Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Creating a quiz game using QML and js

    QML and Qt Quick
    3
    7
    3170
    Loading More Posts
    • 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
      jr_jags last edited by

      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 Reply Quote 0
      • S
        Slocan last edited by

        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 Reply Quote 0
        • J
          jr_jags last edited by

          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 Reply Quote 0
          • N
            nhojyer07 last edited by

            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 Reply Quote 0
            • N
              nhojyer07 last edited by

              sorry for double post.. please delete if necessary

              1 Reply Last reply Reply Quote 0
              • J
                jr_jags last edited by

                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 Reply Quote 0
                • N
                  nhojyer07 last edited by

                  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 Reply Quote 0
                  • First post
                    Last post