Warning, /education/gcompris/src/activities/learn_digits/Learn_digits.qml is written in an unsupported language. File is not indexed.
0001 /* GCompris - learn_digits.qml
0002 *
0003 * SPDX-FileCopyrightText: 2020 Timothée Giet <animtim@gmail.com>
0004 *
0005 * Authors:
0006 * Timothée Giet <animtim@gmail.com>
0007 *
0008 * SPDX-License-Identifier: GPL-3.0-or-later
0009 */
0010 import QtQuick 2.12
0011 import GCompris 1.0
0012
0013 import "../../core"
0014 import "learn_digits.js" as Activity
0015
0016 ActivityBase {
0017 id: activity
0018 property bool operationMode: false
0019
0020 onStart: focus = true
0021 onStop: {}
0022
0023 Keys.onPressed: {
0024 Activity.processKey(event);
0025 }
0026
0027 pageComponent: Image {
0028 id: background
0029 source: "qrc:/gcompris/src/activities/braille_fun/resource/hillside.svg"
0030 sourceSize.width: width
0031 sourceSize.height: height
0032 fillMode: Image.PreserveAspectCrop
0033 signal start
0034 signal stop
0035 signal scoreStop
0036
0037 Component.onCompleted: {
0038 dialogActivityConfig.initialize()
0039 activity.start.connect(start)
0040 activity.stop.connect(stop)
0041 }
0042
0043 // Add here the QML items you need to access in javascript
0044 QtObject {
0045 id: items
0046 property Item activityPage: activity
0047 property GCAudio audioVoices: activity.audioVoices
0048 property GCSfx audioEffects: activity.audioEffects
0049 property alias background: background
0050 property int currentLevel: activity.currentLevel
0051 property alias bonus: bonus
0052 property alias score: score
0053 property alias circlesLine: circlesLine
0054 property alias fileId: fileId
0055 property alias locale: background.locale
0056 property alias iAmReady: iAmReady
0057 property alias errorRectangle: errorRectangle
0058 property int nbSubLevel
0059 property int answer: 0
0060 property int question: 0
0061 property string questionText: ""
0062 property int circlesModel: 3
0063 property int selectedCircle: -1
0064 property bool inputLocked: false
0065 readonly property var levels: activity.datasetLoader.data
0066 property int mode: 1 // default is arabic numerals
0067 property bool voicesEnabled: true
0068 property string imageSource: "qrc:/gcompris/src/core/resource/empty.svg"
0069 }
0070 property string locale: ApplicationSettings.locale
0071 property bool isHorizontal: layoutArea.width >= layoutArea.height
0072
0073 onStart: {
0074 Activity.start(items, operationMode);
0075 if(activity.operationMode)
0076 itemsVisible();
0077 else
0078 itemsHidden();
0079 }
0080 onStop: { Activity.stop() }
0081
0082 function itemsVisible() {
0083 iAmReady.visible = false;
0084 if(DownloadManager.areVoicesRegistered(ApplicationSettings.locale) && !operationMode && items.voicesEnabled) {
0085 repeatItem.visible = true;
0086 }
0087 if(items.mode === 1) {
0088 questionText.visible = true;
0089 } else {
0090 questionImage.visible = true;
0091 }
0092 scoreArea.visible = true;
0093 circlesBackground.visible = true;
0094 circlesArea.visible = true;
0095 Activity.initLevel();
0096 }
0097
0098 function itemsHidden() {
0099 iAmReady.visible = true;
0100 repeatItem.visible = false;
0101 questionText.visible = false;
0102 questionImage.visible = false;
0103 scoreArea.visible = false;
0104 circlesBackground.visible = false;
0105 circlesArea.visible = false;
0106 }
0107
0108 ReadyButton {
0109 id: iAmReady
0110 onClicked: background.itemsVisible();
0111 }
0112
0113 Item {
0114 id: layoutArea
0115 anchors.top: parent.top
0116 anchors.bottom: bar.top
0117 anchors.bottomMargin: bar.height * 0.2
0118 anchors.left: parent.left
0119 anchors.right: parent.right
0120 }
0121
0122 Item {
0123 id: questionArea
0124 anchors.top: layoutArea.top
0125 anchors.left: layoutArea.left
0126 }
0127
0128 Item {
0129 id: repeatArea
0130 width: textArea.width
0131 height: textArea.height
0132 }
0133
0134 BarButton {
0135 id: repeatItem
0136 visible: false
0137 source: "qrc:/gcompris/src/core/resource/bar_repeat.svg"
0138 sourceSize.width: repeatArea.height > repeatArea.width ?
0139 repeatArea.width * 0.6 : repeatArea.height * 0.6
0140 anchors.centerIn: repeatArea
0141 onClicked: {
0142 if(!items.inputLocked && !audioVoices.isPlaying()) {
0143 Activity.playLetter(items.question.toString());
0144 }
0145 }
0146 }
0147
0148 Item {
0149 id: textArea
0150 anchors.centerIn: questionArea
0151 }
0152 GCText {
0153 id: questionText
0154 visible: false
0155 width: textArea.width
0156 height: textArea.height
0157 anchors.centerIn: textArea
0158 horizontalAlignment : Text.AlignHCenter
0159 verticalAlignment : Text.AlignVCenter
0160 text: items.questionText
0161 minimumPointSize: 12
0162 fontSize: 1024
0163 fontSizeMode: Text.Fit
0164 font.bold: true
0165 color: "#d2611d"
0166 style: Text.Outline
0167 styleColor: "white"
0168 }
0169 Image {
0170 id: questionImage
0171 visible: false
0172 anchors.centerIn: textArea
0173 height: Math.min(textArea.height, textArea.width)
0174 width: height
0175 sourceSize.width: height
0176 sourceSize.height: height
0177 fillMode: Image.PreserveAspectFit
0178 source: items.imageSource
0179 }
0180 Item {
0181 id: scoreArea
0182 width: textArea.width
0183 height: textArea.height
0184 visible: false
0185 property int scoreItemsSize: 10
0186 Score {
0187 id: score
0188 width: scoreArea.scoreItemsSize
0189 numberOfSubLevels: items.nbSubLevel
0190 currentSubLevel: 0
0191 onStop: Activity.nextSubLevel();
0192 }
0193 BarButton {
0194 id: okButton
0195 source: "qrc:/gcompris/src/core/resource/bar_ok.svg"
0196 height: scoreArea.scoreItemsSize
0197 width: scoreArea.scoreItemsSize
0198 sourceSize.height: height
0199 sourceSize.width: height
0200 enabled: !items.inputLocked
0201 onClicked: {
0202 if(!items.inputLocked)
0203 Activity.checkAnswer();
0204 }
0205 }
0206 states: [
0207 State {
0208 id: scoreHorizontal
0209 when: scoreArea.width >= scoreArea.height
0210 PropertyChanges {
0211 target: scoreArea
0212 scoreItemsSize: scoreArea.width * 0.4
0213 }
0214 AnchorChanges {
0215 target: score
0216 anchors.verticalCenter: parent.verticalCenter
0217 anchors.horizontalCenter: undefined
0218 anchors.right: parent.right
0219 anchors.bottom: undefined
0220 }
0221 AnchorChanges {
0222 target: okButton
0223 anchors.verticalCenter: parent.verticalCenter
0224 anchors.horizontalCenter: undefined
0225 anchors.left: parent.left
0226 anchors.top: undefined
0227 }
0228 },
0229 State {
0230 id: scoreVertical
0231 when: scoreArea.width < scoreArea.height
0232 PropertyChanges {
0233 target: scoreArea
0234 scoreItemsSize: scoreArea.height * 0.5
0235 }
0236 AnchorChanges {
0237 target: score
0238 anchors.verticalCenter: undefined
0239 anchors.horizontalCenter: parent.horizontalCenter
0240 anchors.right: undefined
0241 anchors.bottom: parent.bottom
0242 }
0243 AnchorChanges {
0244 target: okButton
0245 anchors.verticalCenter: undefined
0246 anchors.horizontalCenter: parent.horizontalCenter
0247 anchors.left: undefined
0248 anchors.top: parent.top
0249 }
0250 }
0251 ]
0252 }
0253
0254 Rectangle {
0255 id: circlesBackground
0256 visible: false
0257 color: "#D0FFFFFF"
0258 anchors.bottom: layoutArea.bottom
0259 anchors.right: layoutArea.right
0260 anchors.margins: 10 * ApplicationInfo.ratio
0261 radius: anchors.margins
0262 }
0263 Item {
0264 id: circlesArea
0265 visible: false
0266 property int itemWidth: 10 //temp values overriden with states
0267 width: 10
0268 height: 10
0269 anchors.centerIn: circlesBackground
0270 Rectangle {
0271 id: circlesSelector
0272 width: circlesArea.itemWidth
0273 height: circlesArea.itemWidth
0274 radius: 10 * ApplicationInfo.ratio
0275 color: "#803ACAFF"
0276 visible: items.selectedCircle > -1
0277 anchors.centerIn: circlesLine.itemAt(items.selectedCircle)
0278 }
0279 Repeater {
0280 id: circlesLine
0281 model: items.circlesModel
0282 delegate: circlesComponent
0283 }
0284 Component {
0285 id: circlesComponent
0286 Item {
0287 function resetCircle() {
0288 isFilled = false;
0289 circleColor = "#00ffffff";
0290 }
0291 function clickCircle() {
0292 if(!isFilled) {
0293 ++items.answer;
0294 circleColor = "#ffd2611d";
0295 } else {
0296 --items.answer;
0297 circleColor = "#00ffffff";
0298 }
0299 isFilled = !isFilled
0300 }
0301 width: circlesArea.itemWidth
0302 height: width
0303 x: isHorizontal ? width * index : 0
0304 y: isHorizontal ? 0 : width * index
0305 property bool isFilled: false
0306 property string circleColor: "#00ffffff"
0307 Rectangle {
0308 id: circle
0309 anchors.centerIn: parent
0310 border.color: "#373737"
0311 border.width: 5 * ApplicationInfo.ratio
0312 color: circleColor
0313 width: parent.width * 0.9
0314 height: width
0315 radius: width * 0.5
0316 }
0317 MouseArea {
0318 id: circleInput
0319 anchors.fill: parent
0320 enabled: !items.inputLocked
0321 onClicked: parent.clickCircle();
0322 }
0323 }
0324 }
0325 }
0326
0327 states: [
0328 State {
0329 id: horizontalLayout
0330 when: isHorizontal
0331 AnchorChanges {
0332 target: questionArea
0333 anchors.bottom: layoutArea.verticalCenter
0334 anchors.right: layoutArea.right
0335 }
0336 AnchorChanges {
0337 target: circlesBackground
0338 anchors.top: layoutArea.verticalCenter
0339 anchors.left: layoutArea.left
0340 }
0341 PropertyChanges {
0342 target: textArea
0343 width: questionArea.width * 0.3
0344 height: questionArea.height * 0.8
0345 }
0346 AnchorChanges {
0347 target: repeatArea
0348 anchors.right: textArea.left
0349 anchors.bottom: undefined
0350 anchors.verticalCenter: textArea.verticalCenter
0351 anchors.horizontalCenter: undefined
0352 }
0353 AnchorChanges {
0354 target: scoreArea
0355 anchors.left: textArea.right
0356 anchors.top: undefined
0357 anchors.verticalCenter: textArea.verticalCenter
0358 anchors.horizontalCenter: undefined
0359 }
0360 PropertyChanges {
0361 target: circlesArea
0362 itemWidth: Math.min(circlesBackground.width / (items.circlesModel + 1),
0363 circlesBackground.height * 0.9)
0364 width: itemWidth * items.circlesModel
0365 height: itemWidth
0366 }
0367 PropertyChanges {
0368 target: errorRectangle
0369 imageSize: height * 0.5
0370 }
0371 },
0372 State {
0373 id: verticaleLayout
0374 when: !isHorizontal
0375 AnchorChanges {
0376 target: questionArea
0377 anchors.bottom: layoutArea.bottom
0378 anchors.right: layoutArea.horizontalCenter
0379 }
0380 AnchorChanges {
0381 target: circlesBackground
0382 anchors.top: layoutArea.top
0383 anchors.left: layoutArea.horizontalCenter
0384 }
0385 PropertyChanges {
0386 target: textArea
0387 width: questionArea.width * 0.8
0388 height: questionArea.height * 0.3
0389 }
0390 AnchorChanges {
0391 target: repeatArea
0392 anchors.right: undefined
0393 anchors.bottom: textArea.top
0394 anchors.verticalCenter: undefined
0395 anchors.horizontalCenter: textArea.horizontalCenter
0396 }
0397 AnchorChanges {
0398 target: scoreArea
0399 anchors.left: undefined
0400 anchors.top: textArea.bottom
0401 anchors.verticalCenter: undefined
0402 anchors.horizontalCenter: textArea.horizontalCenter
0403 }
0404 PropertyChanges {
0405 target: circlesArea
0406 itemWidth: Math.min(circlesBackground.height / (items.circlesModel + 1),
0407 circlesBackground.width * 0.9)
0408 width: itemWidth
0409 height: itemWidth * items.circlesModel
0410 }
0411 PropertyChanges {
0412 target: errorRectangle
0413 imageSize: width * 0.5
0414 }
0415 }
0416 ]
0417
0418 ErrorRectangle {
0419 id: errorRectangle
0420 anchors.fill: circlesBackground
0421 radius: circlesBackground.radius
0422 imageSize: height * 0.5
0423 function releaseControls() { items.inputLocked = false; }
0424 }
0425
0426 File {
0427 id: fileId
0428 }
0429
0430 DialogHelp {
0431 id: dialogHelp
0432 onClose: home();
0433 }
0434
0435 DialogChooseLevel {
0436 id: dialogActivityConfig
0437 currentActivity: activity.activityInfo
0438 onLoadData: {
0439 if(activityData && activityData["mode"]) {
0440 items.mode = activityData["mode"];
0441 }
0442 if(activityData && activityData["voicesEnabled"]) {
0443 items.voicesEnabled = activityData["voicesEnabled"] === "true" ? true : false;
0444 }
0445 }
0446 onSaveData: {
0447 levelFolder = dialogActivityConfig.chosenLevels
0448 currentActivity.currentLevels = dialogActivityConfig.chosenLevels
0449 ApplicationSettings.setCurrentLevels(currentActivity.name, dialogActivityConfig.chosenLevels)
0450 }
0451 onStartActivity: {
0452 background.stop();
0453 background.start();
0454 }
0455
0456 onClose: home()
0457 }
0458
0459
0460 Bar {
0461 id: bar
0462 level: items.currentLevel + 1
0463 content: BarEnumContent { value: help | home | level | activityConfig}
0464 onHelpClicked: {
0465 displayDialog(dialogHelp);
0466 }
0467 onPreviousLevelClicked: {
0468 Activity.previousLevel();
0469 }
0470 onNextLevelClicked: {
0471 Activity.nextLevel();
0472 }
0473 onHomeClicked: activity.home();
0474 onActivityConfigClicked: displayDialog(dialogActivityConfig);
0475 }
0476
0477 Bonus {
0478 id: bonus
0479 Component.onCompleted: win.connect(Activity.nextLevel);
0480 }
0481 }
0482
0483 }