cpp/marble-game/CountryByShape.qml

0001 // SPDX-License-Identifier: LGPL-2.1-or-later
0002 //
0003 // SPDX-FileCopyrightText: 2014 Abhinav Gangwar <abhgang@gmail.com>
0004 //
0005
0006
0007 import QtQuick 2.0
0008 import QtQuick.Controls 1.2
0009 import QtQuick.Controls.Styles 1.2
0010
0011 Rectangle {
0012
0013     id: countryByShape
0014     objectName: "countryByShape"
0015
0016     color: "#D6ADFF"
0017
0018     signal nextQuestionRequested()
0019     signal gameQuitRequested()
0020     signal questionsTimeout()
0021
0022     property int panelWidth: 200
0023     property int panelHeight: 600
0024
0025     width: panelWidth
0026     height: panelHeight
0027
0028     // No. of radio buttons in Column element
0029     property real nItemsInColumn: 4
0030
0031     // Button Width and Height
0032     property real labelWidth: countryByShape.panelWidth*4/5
0033     property real labelHeight: countryByShape.panelHeight/16
0034
0035     // Result Display
0036     property bool showResult: false
0037
0038     // Display the button to show correct Answer
0039     property bool showCorrectAnswer: false
0040     property string answerToShow: qsTr("View Answer")
0041
0042     property string result: qsTr("Undetermined")
0043     property int score: 0
0044     property bool scoreDetermined: false
0045     property int totalQuestionsAsked: 0  // Total no. of questions that have been asked to user
0046     property int maximumQuestions: 0
0047
0048     //property string userAnswer: "Undetermined"
0049     property string correctAnswer: qsTr("Undetermined")
0050
0051     Rectangle {
0052         id: gameDescription
0053         height: panelHeight*2/( 3 * ( nItemsInColumn + 2 ) )
0054         width: panelWidth
0055         anchors.top: parent.top
0056         anchors.topMargin: 5
0057         anchors.bottomMargin: 5
0058         color: "#D6ADFF"
0059
0060         Rectangle {
0061             id: gameName
0062             width: parent.width/2
0063             height: parent.height
0064             anchors.left: parent.left
0065             anchors.leftMargin: 5
0066
0067             border.width: 1
0068             border.color: "#000000"
0069             radius: 6
0070             smooth: true
0071             color: "#696969"
0072
0073             Text {
0074                 width: parent.width
0075                 wrapMode: Text.WordWrap
0076                 horizontalAlignment: Text.AlignHCenter
0077                 anchors.verticalCenter: parent.verticalCenter
0078                 color: "white"
0079
0080                 text: qsTr("Identify The Highlighted Country")
0081             }
0082         }
0083
0084         CustomButton {
0085             id: quitGameButton
0086             buttonWidth: parent.width/2
0087             buttonHeight: parent.height
0088
0089             normalColor: "#696969"
0090             borderColor: "#000000"
0091
0092             labelColor: "white"
0093             labelText: qsTr("Quit Game")
0094             labelSize: parent.width/15
0095
0096             anchors.left: gameName.right
0097             anchors.leftMargin: 5
0098
0099             anchors.top: parent.top
0100             anchors.right: parent.right
0101             anchors.rightMargin: 5
0102
0103             onButtonClick: {
0104                 resetOptions();
0105                 gameQuitRequested();
0106             }
0107         }
0108     }
0109
0110     Column {
0111         id: buttonArea
0112         anchors.top: gameDescription.bottom
0113         anchors.topMargin: 20
0114         spacing: 5
0115
0116         ExclusiveGroup { id: group }
0117         CustomRadioButton {
0118             id: answerOption1
0119             radioButtonWidth: labelWidth
0120             radioButtonHeight: labelHeight
0121
0122             normalColor: "#A9A9A9"
0123             labelColor: "white"
0124
0125             labelText: qsTr("Option1")
0126             buttonGroup: group
0127
0128             onRadioButtonClick: {
0129                 showResult = true;
0130                 if ( labelText == correctAnswer ) {
0131                     if ( timer.running == false ) {
0132                         timer.start();
0133                     }
0134
0135                     result = "<font face=\"verdana\" size=\"4\" color=\"#00ff00\"><b>Hooray !! Right Answer</b></font>";
0136                     if ( !scoreDetermined &&
0137                         !showCorrectAnswer )
0138                     {
0139                         ++score;
0140                         scoreDetermined = true;
0141                     }
0142                 }
0143                 else {
0144                     /**
0145                     * Stop timer ( so that the game
0146                     * doesn't switch to next question
0147                     * automatically ) and let the user
0148                     * choose whether he/she wants
0149                     * to see the correct answer.
0150                     **/
0151                     if ( timer.running == true ) {
0152                         timer.stop();
0153                     }
0154
0155                     result = "<p align=\"center\"> <font face=\"verdana\" size=\"4\" color=\"#ff0000\"><b>Oops, Wrong Answer</b></font> </p>";
0156                     showCorrectAnswer = true
0157                 }
0158             }
0159         }
0160
0161         CustomRadioButton {
0162             id: answerOption2
0163             radioButtonWidth: labelWidth
0164             radioButtonHeight: labelHeight
0165
0166             normalColor: "#A9A9A9"
0167             labelColor: "white"
0168
0169             labelText: qsTr("Option2")
0170             buttonGroup: group
0171
0172             onRadioButtonClick: {
0173                 showResult = true;
0174                 if ( labelText == correctAnswer ) {
0175                     if ( timer.running == false ) {
0176                         timer.start();
0177                     }
0178
0179                     result = "<font face=\"verdana\" size=\"4\" color=\"#00ff00\"><b>Hooray !! Right Answer</b></font>";
0180                     if ( !scoreDetermined &&
0181                         !showCorrectAnswer )
0182                     {
0183                         ++score;
0184                         scoreDetermined = true;
0185                     }
0186                 }
0187                 else {
0188                     /**
0189                      * Stop timer ( so that the game
0190                      * doesn't switch to next question
0191                      * automatically ) and let the user
0192                      * choose whether he/she wants
0193                      * to see the correct answer.
0194                      **/
0195
0196                     if ( timer.running == true ) {
0197                         timer.stop();
0198                     }
0199
0200                     result = "<p align=\"center\"> <font face=\"verdana\" size=\"4\" color=\"#ff0000\"><b>Oops, Wrong Answer</b></font> </p>";
0201                     showCorrectAnswer = true
0202                 }
0203             }
0204         }
0205
0206         CustomRadioButton {
0207             id: answerOption3
0208             radioButtonWidth: labelWidth
0209             radioButtonHeight: labelHeight
0210
0211             normalColor: "#A9A9A9"
0212             labelColor: "white"
0213
0214             labelText: qsTr("Option3")
0215             buttonGroup: group
0216
0217             onRadioButtonClick: {
0218                 showResult = true;
0219                 if ( labelText == correctAnswer ) {
0220                     if ( timer.running == false ) {
0221                         timer.start();
0222                     }
0223
0224                     result = "<font face=\"verdana\" size=\"4\" color=\"#00ff00\"><b>Hooray !! Right Answer</b></font>";
0225                     if ( !scoreDetermined &&
0226                         !showCorrectAnswer )
0227                     {
0228                         ++score;
0229                         scoreDetermined = true;
0230                     }
0231                 }
0232                 else {
0233                     /**
0234                      * Stop timer ( so that the game
0235                      * doesn't switch to next question
0236                      * automatically ) and let the user
0237                      * choose whether he/she wants
0238                      * to see the correct answer.
0239                      **/
0240                     if ( timer.running == true ) {
0241                         timer.stop();
0242                     }
0243
0244                     result = "<p align=\"center\"> <font face=\"verdana\" size=\"4\" color=\"#ff0000\"><b>Oops, Wrong Answer</b></font> </p>";
0245                     showCorrectAnswer = true
0246                 }
0247             }
0248         }
0249
0250         CustomRadioButton {
0251             id: answerOption4
0252             radioButtonWidth: labelWidth
0253             radioButtonHeight: labelHeight
0254
0255             normalColor: "#A9A9A9"
0256             labelColor: "white"
0257
0258             labelText: qsTr("Option4")
0259             buttonGroup: group
0260
0261             onRadioButtonClick: {
0262                 showResult = true;
0263                 if ( labelText == correctAnswer ) {
0264                     if ( timer.running == false ) {
0265                         timer.start();
0266                     }
0267
0268                     result = "<font face=\"verdana\" size=\"4\" color=\"#00ff00\"><b>Hooray !! Right Answer</b></font>";
0269                     if ( !scoreDetermined &&
0270                         !showCorrectAnswer )
0271                     {
0272                         ++score;
0273                         scoreDetermined = true;
0274                     }
0275                 }
0276                 else {
0277                     /**
0278                      * Stop timer ( so that the game
0279                      * doesn't switch to next question
0280                      * automatically ) and let the user
0281                      * choose whether he/she wants
0282                      * to see the correct answer.
0283                      **/
0284                     if ( timer.running == true ) {
0285                         timer.stop();
0286                     }
0287
0288                     result = "<p align=\"center\"> <font face=\"verdana\" size=\"4\" color=\"#ff0000\"><b>Oops, Wrong Answer</b></font> </p>";
0289                     showCorrectAnswer = true
0290                 }
0291             }
0292         }
0293     }
0294
0295     CustomButton {
0296         id: nextButton
0297         anchors.top: buttonArea.bottom
0298         anchors.topMargin: 20
0299         anchors.horizontalCenter: parent.horizontalCenter
0300         buttonWidth: labelWidth
0301         buttonHeight: labelHeight
0302
0303         normalColor: "#696969"
0304         borderColor: "#000000"
0305
0306         labelText: qsTr("Next")
0307         labelColor: "white"
0308         onButtonClick: {
0309             showCorrectAnswer = false;
0310             answerToShow = qsTr("View Answer");
0311             nextQuestionRequested();
0312         }
0313     }
0314
0315     Rectangle {
0316         id: resultDisplay
0317
0318         anchors.left: parent.left
0319         anchors.leftMargin: 20
0320         anchors.right: parent.right
0321         anchors.rightMargin: 20
0322         anchors.top: nextButton.bottom
0323         anchors.topMargin: 15
0324
0325         height: panelHeight/6
0326
0327         color: "#80FFFF"
0328         border.width: 1
0329         border.color: "#696969"
0330         radius: 40
0331
0332         visible: showResult
0333
0334         Text {
0335             id: resultContent
0336
0337             anchors.left: parent.left
0338             anchors.leftMargin: 25
0339             anchors.right: parent.right
0340             anchors.rightMargin: 5
0341             anchors.verticalCenter: parent.verticalCenter
0342
0343             wrapMode: Text.WordWrap
0344             text: qsTr(result)
0345         }
0346     }
0347
0348     CustomButton {
0349          id: viewCorrectAnswer
0350
0351          anchors.top: resultDisplay.bottom
0352          anchors.topMargin: 15
0353          anchors.left: parent.left
0354          anchors.leftMargin: 20
0355          anchors.right: parent.right
0356          anchors.rightMargin: 20
0357
0358          buttonHeight: labelHeight
0359          borderColor: "#696969"
0360          labelColor: "green"
0361          labelText: answerToShow
0362
0363          visible: showCorrectAnswer
0364
0365          onButtonClick: {
0366              answerToShow = correctAnswer;
0367          }
0368     }
0369
0370     Rectangle {
0371         id: scoreDisplay
0372
0373         anchors.left: parent.left
0374         anchors.leftMargin:10
0375         anchors.right: parent.right
0376         anchors.rightMargin: 10
0377         anchors.top: viewCorrectAnswer.bottom
0378         anchors.topMargin: 20
0379
0380         height: 2*labelHeight
0381
0382         border.width: 1
0383         border.color: "#696969"
0384         color: "darkgrey"
0385
0386         Text {
0387             id: scoreContent
0388             color: "white"
0389             width: parent.width
0390             horizontalAlignment: Text.AlignHCenter
0391             font.pixelSize: 18
0392             text: {
0393                 qsTr("Your Progress \n\n" + score + "/" + totalQuestionsAsked)
0394             }
0395         }
0396     }
0397
0398     Timer {
0399         id: timer
0400         interval: 700
0401         repeat: false
0402         onTriggered: {
0403             questionsTimeout();
0404         }
0405     }
0406
0407     onQuestionsTimeout: {
0408         timer.stop();
0409         showCorrectAnswer = false;
0410         answerToShow = qsTr("View Answer");
0411         nextQuestionRequested();
0412     }
0413
0414     function initGame() {
0415         score = 0;
0416         totalQuestionsAsked = 0;
0417     }
0418
0419     function resetOptions() {
0420         for ( var i = 0; i < buttonArea.children.length; ++i ) {
0421             if ( buttonArea.children[i].checked == true ) {
0422                 buttonArea.children[i].checked = false;
0423             }
0424             buttonArea.children[i].labelText = qsTr("NO_OPTION")
0425             result = "Undetermined";
0426             correctAnswer = "Undetermined";
0427             showResult = false;
0428
0429             showCorrectAnswer = false;
0430             answerToShow = "View Answer";
0431         }
0432     }
0433
0434     function setQuestion( answerOptions, rightAnswer ) {
0435         if ( maximumQuestions > 0 ) {
0436             resetOptions();
0437             ++totalQuestionsAsked;
0438             scoreDetermined = false;
0439             correctAnswer = rightAnswer;
0440             for ( var i = 0; i < buttonArea.children.length; ++i ) {
0441                 buttonArea.children[i].labelText = answerOptions[i];
0442             }
0443         }
0444         else {
0445             gameQuitRequested()
0446         }
0447         maximumQuestions = maximumQuestions - 1;
0448     }
0449
0450     function setMaximumQuestions( questionsCount ) {
0451         maximumQuestions = questionsCount;
0452     }
0453 }