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