Warning, /education/gcompris/src/activities/learn_decimals/resource/TutorialBase.qml is written in an unsupported language. File is not indexed.
0001 /* GCompris - TutorialBase.qml
0002 *
0003 * SPDX-FileCopyrightText: 2021 Mariam Fahmy <mariamfahmy66@gmail.com>
0004 *
0005 * Authors:
0006 * Mariam Fahmy <mariamfahmy66@gmail.com>
0007 * Timothée Giet <animtim@gmail.com>
0008 *
0009 * SPDX-License-Identifier: GPL-3.0-or-later
0010 */
0011 import QtQuick 2.12
0012 import GCompris 1.0
0013
0014 import "../../../core"
0015 import "../"
0016 import "../learn_decimals.js" as Activity
0017
0018 Image {
0019 id: tutorialBase
0020 anchors.fill: parent
0021 fillMode: Image.PreserveAspectFit
0022 source: "qrc:/gcompris/src/activities/braille_fun/resource/hillside.svg"
0023
0024 property bool isRepresentationShown: false
0025 property bool isResultTyping: false
0026 property bool isSubtractionMode2: false
0027
0028 Item {
0029 id: layoutTutorial
0030 width: parent.paintedWidth
0031 height: parent.paintedHeight
0032 anchors.centerIn: parent
0033
0034 readonly property string largestNumber: activity.isQuantityMode ? "15" : Activity.toDecimalLocaleNumber(1.5)
0035 readonly property string smallestNumber: Activity.toDecimalLocaleNumber(0.3)
0036
0037 Rectangle {
0038 id: decimalNumberTutorial
0039 width: parent.width * 0.6
0040 height: parent.height / 12
0041 radius: 10
0042 color: "#373737"
0043 anchors.horizontalCenter: parent.horizontalCenter
0044 anchors.top: parent.top
0045 anchors.topMargin: 2 * ApplicationInfo.ratio
0046 GCText {
0047 anchors.centerIn: parent
0048 width: parent.width - 4 * ApplicationInfo.ratio
0049 height: parent.height
0050 text: layoutTutorial.displayQuestion()
0051 fontSize: smallSize
0052 fontSizeMode: Text.Fit
0053 wrapMode: Text.WordWrap
0054 horizontalAlignment: Text.AlignHCenter
0055 verticalAlignment: Text.AlignVCenter
0056 font.weight: Font.DemiBold
0057 color: "white"
0058 }
0059 }
0060
0061 function displayQuestion() {
0062 if(activity.isSubtractionMode) {
0063 return decimalNumber.subtractionQuestion.arg(layoutTutorial.largestNumber).arg(layoutTutorial.smallestNumber)
0064 }
0065 else if(activity.isAdditionMode) {
0066 return decimalNumber.additionQuestion.arg(layoutTutorial.largestNumber).arg(layoutTutorial.smallestNumber)
0067 }
0068 else if(activity.isQuantityMode) {
0069 return decimalNumber.quantityQuestion.arg(layoutTutorial.largestNumber)
0070 }
0071 else {
0072 return decimalNumber.decimalQuestion.arg(layoutTutorial.largestNumber)
0073 }
0074 }
0075
0076 Item {
0077 id: tutoLayoutArea
0078 anchors.top: decimalNumberTutorial.bottom
0079 anchors.topMargin: 2 * ApplicationInfo.ratio
0080 anchors.bottom: okButtonTutorial.top
0081 anchors.bottomMargin: anchors.topMargin
0082 anchors.horizontalCenter: parent.horizontalCenter
0083 width: parent.width * 0.7
0084 }
0085
0086 Rectangle {
0087 id: topRectangleTutorial
0088 visible: activity.isSubtractionMode || tutorialBase.isRepresentationShown
0089 anchors.top: tutoLayoutArea.top
0090 color: "#F2F2F2"
0091 border.color: "#373737"
0092 border.width: 1
0093 radius: 5
0094
0095 states: [
0096 State {
0097 when: background.horizontalLayout
0098 PropertyChanges {
0099 target: topRectangleTutorial
0100 width: tutoLayoutArea.width
0101 height: activity.isSubtractionMode ? tutoLayoutArea.height * 0.8 : tutoLayoutArea.height * 0.636
0102 }
0103 AnchorChanges {
0104 target: topRectangleTutorial
0105 anchors.right: undefined
0106 anchors.horizontalCenter: tutoLayoutArea.horizontalCenter
0107 }
0108 PropertyChanges {
0109 target: firstBar
0110 cellSize: activity.isSubtractionMode ?
0111 Math.min(topRectangleTutorial.height / 6, topRectangleTutorial.width / 11) :
0112 Math.min(topRectangleTutorial.height / 7, topRectangleTutorial.width / 11)
0113 anchors.topMargin: activity.isSubtractionMode ? firstBar.cellSize * 0.14 :
0114 firstBar.cellSize * 0.125
0115 anchors.leftMargin: 0
0116 }
0117 AnchorChanges {
0118 target: firstBar
0119 anchors.top: topBarsLayout.top
0120 anchors.horizontalCenter: topBarsLayout.horizontalCenter
0121 anchors.verticalCenter: undefined
0122 anchors.left: undefined
0123 }
0124 PropertyChanges {
0125 target: secondBar
0126 anchors.topMargin: activity.isSubtractionMode ? firstBar.cellSize * 0.14 :
0127 firstBar.cellSize * 0.125
0128 anchors.leftMargin: 0
0129 }
0130 AnchorChanges {
0131 target: secondBar
0132 anchors.top: firstBar.bottom
0133 anchors.horizontalCenter: topRectangleTutorial.horizontalCenter
0134 anchors.verticalCenter: undefined
0135 anchors.left: undefined
0136 }
0137 },
0138 State {
0139 when: !background.horizontalLayout && !tutorialBase.isResultTyping
0140 PropertyChanges {
0141 target: topRectangleTutorial
0142 width: activity.isSubtractionMode ? tutoLayoutArea.width : tutoLayoutArea.width * 0.636
0143 height: tutoLayoutArea.height * 0.8
0144 anchors.rightMargin: 5 * ApplicationInfo.ratio
0145 }
0146 AnchorChanges {
0147 target: topRectangleTutorial
0148 anchors.right: tutoLayoutArea.right
0149 anchors.horizontalCenter: undefined
0150 }
0151 PropertyChanges {
0152 target: firstBar
0153 cellSize: activity.isSubtractionMode ?
0154 Math.min(topRectangleTutorial.width / 6, topRectangleTutorial.height / 11) :
0155 Math.min(topRectangleTutorial.width / 7, topRectangleTutorial.height / 11)
0156 anchors.topMargin: 0
0157 anchors.leftMargin: activity.isSubtractionMode ? firstBar.cellSize * 0.14 :
0158 firstBar.cellSize * 0.125
0159 }
0160 AnchorChanges {
0161 target: firstBar
0162 anchors.top: topBarsLayout.top
0163 anchors.horizontalCenter: undefined
0164 anchors.verticalCenter: topRectangleTutorial.verticalCenter
0165 anchors.left: topBarsLayout.left
0166 }
0167 PropertyChanges {
0168 target: secondBar
0169 anchors.topMargin: 0
0170 anchors.leftMargin: activity.isSubtractionMode ? firstBar.cellSize * 0.14 :
0171 firstBar.cellSize * 0.125
0172 }
0173 AnchorChanges {
0174 target: secondBar
0175 anchors.top: undefined
0176 anchors.horizontalCenter: undefined
0177 anchors.verticalCenter: topRectangleTutorial.verticalCenter
0178 anchors.left: firstBar.right
0179 }
0180 },
0181 State {
0182 when: !background.horizontalLayout && tutorialBase.isResultTyping
0183 PropertyChanges {
0184 target: topRectangleTutorial
0185 width: activity.isSubtractionMode ? tutoLayoutArea.width : tutoLayoutArea.width * 0.636
0186 height: tutoLayoutArea.height * 0.8
0187 anchors.rightMargin: 5 * ApplicationInfo.ratio
0188 }
0189 AnchorChanges {
0190 target: topRectangleTutorial
0191 anchors.right: undefined
0192 anchors.horizontalCenter: tutoLayoutArea.horizontalCenter
0193 }
0194 PropertyChanges {
0195 target: firstBar
0196 cellSize: activity.isSubtractionMode ?
0197 Math.min(topRectangleTutorial.width / 6, topRectangleTutorial.height / 11) :
0198 Math.min(topRectangleTutorial.width / 7, topRectangleTutorial.height / 11)
0199 anchors.topMargin: 0
0200 anchors.leftMargin: activity.isSubtractionMode ? firstBar.cellSize * 0.14 :
0201 firstBar.cellSize * 0.125
0202 }
0203 AnchorChanges {
0204 target: firstBar
0205 anchors.top: topBarsLayout.top
0206 anchors.horizontalCenter: undefined
0207 anchors.verticalCenter: topRectangleTutorial.verticalCenter
0208 anchors.left: topBarsLayout.left
0209 }
0210 PropertyChanges {
0211 target: secondBar
0212 anchors.topMargin: 0
0213 anchors.leftMargin: activity.isSubtractionMode ? firstBar.cellSize * 0.14 :
0214 firstBar.cellSize * 0.125
0215 }
0216 AnchorChanges {
0217 target: secondBar
0218 anchors.top: undefined
0219 anchors.horizontalCenter: undefined
0220 anchors.verticalCenter: topRectangleTutorial.verticalCenter
0221 anchors.left: firstBar.right
0222 }
0223 }
0224 ]
0225
0226 Item {
0227 id: topBarsLayout
0228 anchors.centerIn: topRectangleTutorial
0229 width: background.horizontalLayout ? firstBar.cellSize * 10 :
0230 (activity.isSubtractionMode ? firstBar.cellSize * 6 :
0231 firstBar.cellSize * 7)
0232 height: background.horizontalLayout ? (activity.isSubtractionMode ?
0233 firstBar.cellSize * 6 : firstBar.cellSize * 7) : firstBar.cellSize * 10
0234 }
0235
0236 TutorialBar {
0237 id: firstBar
0238 model: ["fill","fill","fill","fill","fill","fill","fill","fill","fill","fill"]
0239 }
0240
0241 TutorialBar {
0242 id: secondBar
0243 cellSize: firstBar.cellSize
0244 model: tutorialBase.isSubtractionMode2 ?
0245 ["fill","fill","deleted","deleted","deleted","empty","empty","empty","empty","empty"] :
0246 activity.isSubtractionMode ?
0247 ["fill","fill","fill","fill","fill","empty","empty","empty","empty","empty"] :
0248 activity.isAdditionMode ?
0249 ["fill","fill","fill","fill","fill","fill","fill","fill","none","none"] :
0250 ["fill","fill","fill","fill","fill","none","none","none","none","none"]
0251 }
0252 }
0253
0254 Rectangle {
0255 id: bottomRectangleTutorial
0256 visible: !activity.isSubtractionMode && !tutorialBase.isResultTyping
0257 color: "#F2F2F2"
0258 border.color: "#373737"
0259 border.width: 1
0260 radius: 5
0261
0262 states: [
0263 State {
0264 when: background.horizontalLayout
0265 PropertyChanges {
0266 target: bottomRectangleTutorial
0267 width: tutoLayoutArea.width
0268 // 3/11 of layoutArea
0269 height: tutoLayoutArea.height * 0.273
0270 anchors.rightMargin: 0
0271 // 0.5/11 of layoutArea
0272 anchors.topMargin: tutoLayoutArea.height * 0.045
0273 }
0274 AnchorChanges {
0275 target: bottomRectangleTutorial
0276 anchors.top: topRectangleTutorial.bottom
0277 anchors.horizontalCenter: tutoLayoutArea.horizontalCenter
0278 anchors.right: undefined
0279 }
0280 PropertyChanges {
0281 target: bottomBar
0282 cellSize: Math.min(bottomRectangleTutorial.height / 3, bottomRectangleTutorial.width / 11)
0283 anchors.verticalCenterOffset: -bottomBar.cellSize * 0.5
0284 anchors.horizontalCenterOffset: 0
0285 }
0286 PropertyChanges {
0287 target: arrowTutorial
0288 rotation: 0
0289 anchors.leftMargin: bottomBar.cellSize * 0.5
0290 anchors.topMargin: 0
0291 }
0292 AnchorChanges {
0293 target: arrowTutorial
0294 anchors.top: bottomBar.bottom
0295 anchors.left: bottomBar.left
0296 anchors.right: undefined
0297 }
0298 PropertyChanges {
0299 target: redArrow
0300 height: topRectangleTutorial.height * 0.8
0301 rotation: 0
0302 }
0303 AnchorChanges {
0304 target: redArrow
0305 anchors.bottom: bottomBar.verticalCenter
0306 anchors.horizontalCenter: bottomBar.horizontalCenter
0307 anchors.left: undefined
0308 anchors.verticalCenter: undefined
0309 }
0310 },
0311 State {
0312 when: !background.horizontalLayout
0313 PropertyChanges {
0314 target: bottomRectangleTutorial
0315 width: tutoLayoutArea.width * 0.273
0316 height: tutoLayoutArea.height * 0.8
0317 anchors.rightMargin: tutoLayoutArea.width * 0.045
0318 anchors.topMargin: 0
0319 }
0320 AnchorChanges {
0321 target: bottomRectangleTutorial
0322 anchors.top: tutoLayoutArea.top
0323 anchors.horizontalCenter: undefined
0324 anchors.right: topRectangleTutorial.left
0325 }
0326 PropertyChanges {
0327 target: bottomBar
0328 cellSize: Math.min(bottomRectangleTutorial.width / 3, bottomRectangleTutorial.height / 11)
0329 anchors.verticalCenterOffset: 0
0330 anchors.horizontalCenterOffset: bottomBar.cellSize * 0.5
0331 }
0332 PropertyChanges {
0333 target: arrowTutorial
0334 rotation: 90
0335 anchors.leftMargin: 0
0336 anchors.topMargin: bottomBar.cellSize * 0.5
0337 }
0338 AnchorChanges {
0339 target: arrowTutorial
0340 anchors.top: bottomBar.top
0341 anchors.left: undefined
0342 anchors.right: bottomBar.left
0343 }
0344 PropertyChanges {
0345 target: redArrow
0346 height: topRectangleTutorial.width * 0.5
0347 rotation: 90
0348 }
0349 AnchorChanges {
0350 target: redArrow
0351 anchors.bottom: undefined
0352 anchors.horizontalCenter: undefined
0353 anchors.left: bottomBar.horizontalCenter
0354 anchors.verticalCenter: bottomBar.verticalCenter
0355 }
0356 }
0357 ]
0358
0359 TutorialBar {
0360 id: bottomBar
0361 anchors.centerIn: parent
0362 model: ["fill","empty","empty","empty","empty","empty","empty","empty","empty","empty"]
0363 }
0364
0365 Image {
0366 id: arrowTutorial
0367 source: "qrc:/gcompris/src/activities/learn_decimals/resource/arrow.svg"
0368 width: bottomBar.cellSize
0369 height: width
0370 sourceSize.width: width
0371 }
0372
0373 Image {
0374 id: redArrow
0375 source: "qrc:/gcompris/src/activities/learn_decimals/resource/redArrow.svg"
0376 sourceSize.height: height
0377 fillMode: Image.PreserveAspectFit
0378 visible: topRectangleTutorial.visible && !activity.isSubtractionMode
0379 }
0380 }
0381
0382 Rectangle {
0383 id: answerBackgroundTuto
0384 visible: tutorialBase.isResultTyping
0385 width: parent.width * 0.5
0386 height: parent.height * 0.15
0387 anchors.horizontalCenter: parent.horizontalCenter
0388 anchors.top: topRectangleTutorial.bottom
0389 anchors.topMargin: 5 * ApplicationInfo.ratio
0390 color: "#f2f2f2"
0391 border.color: "#373737"
0392 border.width: 1
0393 radius: 5
0394
0395 GCText {
0396 anchors.fill: parent
0397 horizontalAlignment: Text.AlignHCenter
0398 verticalAlignment: Text.AlignVCenter
0399 color: "#373737"
0400 fontSize: smallSize
0401 text: answerBackground.resultText.arg(" ")
0402 }
0403 }
0404
0405 Image {
0406 id: okButtonTutorial
0407 source: "qrc:/gcompris/src/core/resource/bar_ok.svg"
0408 width: 30 * ApplicationInfo.ratio
0409 sourceSize.width: width
0410 anchors {
0411 bottom: parent.bottom
0412 right: parent.right
0413 bottomMargin: 5 * ApplicationInfo.ratio
0414 rightMargin: 5 * ApplicationInfo.ratio
0415 }
0416 }
0417 }
0418 }