Creating a quiz game using QML and js

jr_jags

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

Slocan

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

jr_jags

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

nhojyer07

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;

the structure of questions array is:

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

nhojyer07

sorry for double post.. please delete if necessary

jr_jags

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;

nhojyer07

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

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

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