Creating a quiz game using QML and js



  • 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



  • 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) ...
    @



  • 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
    }
    }
    @



  • 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]@



  • sorry for double post.. please delete if necessary



  • 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"
    }
    }
    @



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

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

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.