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 RandomRectangle {
width: 360
height: 360Text { 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
-
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]@ -
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"
}
}
@