this.props.onInteract('dismissInstructions', [ actionType, unlockInfo ])}\n onTouchEnd={(e) => {\n e.preventDefault();\n this.props.onInteract('dismissInstructions', [ actionType, unlockInfo ]);\n }}>\n {buttonimage}\n ;\n\n return (\n \n {/*
*/}\n\n
\n
\n
\n
\n
\n
\n
\n
{this.props.title}
\n
\n
\n
You have completed {Math.round(percent * 10) / 10}%
\n
\n
\n
\n
\n {this.props.instruction}\n {button}\n
\n
\n
\n
\n );\n }\n}\n\nexport default Instructions;\n","import React from 'react';\n\nimport text from '../../images/security-text.png';\n\nimport './TextMessage.css';\n\nclass TextMessage extends React.Component {\n render() {\n let style = {};\n\n if (this.props.showTextMessage) {\n style.top = '46px';\n }\n return (\n
\n
\n
\n
\n
\n );\n }\n}\n\nexport default TextMessage;\n","import React from 'react';\nimport './Keyboard.css';\n\nimport deleteIcon from '../../images/delete.png';\nimport mic from '../../images/mic.png';\nimport emoji from '../../images/emoji.png';\nimport shift from '../../images/shift.png';\nimport shiftOn from '../../images/shift-on.png';\nclass Key extends React.Component {\n onKeyPress = (key) => {\n this.props.onKeyPress(key);\n };\n\n render() {\n let key;\n if (this.props.char == 'dlt') {\n key =
;\n } else if (this.props.char == 'shift') {\n if(this.props.capslock){\n key =
;\n }else{\n key =
;\n }\n\n \n \n } else if (this.props.char == 'em') {\n key =
;\n } else if (this.props.char == 'mic') {\n key =
;\n } else {\n let char = this.props.char\n if(this.props.capslock){\n char = char.toUpperCase();\n }\n key =
{char}
;\n }\n\n return (\n
{\n e.preventDefault();\n e.stopPropagation();\n this.props.onKeyPress(this.props.char);\n }}\n onMouseUp={(e) => {\n e.preventDefault();\n e.stopPropagation();\n this.props.onKeyPress(this.props.char);\n }}\n >\n {key}
\n \n
\n\n {this.row1.map((char, index)=>{\n return \n })}\n \n
\n
\n {this.row2.map((char, index)=>{\n return \n })}\n
\n
\n \n {this.row3.map((char, index)=>{\n return \n })}\n \n
\n
\n \n \n \n \n \n
\n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n {this.props.keyboardHint && (\n
\n
\n
{this.props.keyboardHint[0]}
\n
{this.props.keyboardHint[1]}
\n
\n
\n )}\n\n {keyboard}\n
\n Dear Customer,
Get 100,000 frequent flyer points with Squirrel Travel when you take out life insurance with Squirrel Bank.
For\n more information or to see if you are eligible, please contact Squirrel Bank.
\n Regards,
Squirrel Bank\n
\n )\n },\n {\n isRead: false,\n subject: 'Your appointment is booked',\n date: '03 May - 10:53 PM',\n category: 'Rewards',\n body: (\n \n Dear Customer,
Get 100,000 frequent flyer points with Koala Air when you take out life insurance with Squirrel Bank.
For\n more information or to see if you are eligible, please contact Squirrel Bank.
\n Regards,
Squirrel Bank\n
\n )\n },\n {\n isRead: false,\n subject: 'Your home loan statement is ready',\n date: '06 Apr - 06:00 PM',\n category: 'Rewards',\n body: (\n \n Dear Customer,
Get 100,000 frequent flyer points with Koala Air when you take out life insurance with Squirrel Bank.
For\n more information or to see if you are eligible, please contact Squirrel Bank.
\n Regards,
Squirrel Bank\n
\n )\n }\n];\n\ndata.transactionList = [\n {\n date: '06 May',\n transactionDetails: 'Transfer from xx8836',\n amount: '279.90',\n total: '1760.00',\n receipt: 'N00000001591',\n from: 'Squirrel Bank',\n fromAccount: 'xx8836',\n fromAccountDescription: 'Holiday deposit',\n time: '05:24:21 PM',\n to: 'Everyday Account',\n toAccount: '123 456 7890 1234',\n toAccountDescription: 'Holiday deposit',\n authorised: 'John Smith',\n showDetails: false\n },\n {\n date: '05 May',\n transactionDetails: 'Refund from bank',\n amount: '100.00',\n total: '1480.10',\n receipt: 'N00000001591',\n from: 'Squirrel Bank',\n fromAccount: 'xx8836',\n fromAccountDescription: 'Bank refund',\n time: '05:24:21 PM',\n to: 'Everyday Account',\n toAccount: '123 456 7890 1234',\n toAccountDescription: 'Bank refund',\n authorised: 'John Smith',\n showDetails: false\n },\n {\n date: '03 May',\n transactionDetails: 'Rent payment',\n amount: '520.10',\n isNegative: true,\n total: '1380.10',\n receipt: 'N00000001591',\n from: 'Squirrel Bank',\n fromAccount: 'xx8836',\n fromAccountDescription: 'Bank refund',\n time: '05:24:21 PM',\n to: 'Everyday Account',\n toAccount: '123 456 7890 1234',\n toAccountDescription: 'Bank refund',\n authorised: 'John Smith',\n showDetails: false\n }\n];\n\nconst GenericActivity = {\n data: data,\n clientid: '564890P',\n password: 'LaMp48nuf',\n \n\n //clientid: '',\n //password: '',\n\n introduction: (\n \n
\n When banking online, you need to carefully log on using your Client ID and secure Password,\n and then be sure to log off when you have finished your banking.\n
\n
\n In this activity, we are going to practice how to log on and log off.\n
\n
Click Start when you are ready to begin.
\n
\n Welcome!\n
\n );\n } else if (this.props.task) {\n title = (\n \n Task {this.props.task}\n
\n );\n } else if (this.props.welldone) {\n title = (\n \n Well done!\n
\n );\n } else if (this.props.tryagain) {\n title = (\n \n Not quite right.\n
\n );\n }\n\n let topImage = null;\n if (this.props.topImage) {\n let width = this.props.topImageWidth || '90%';\n let marginBottom = this.props.topImageMargin || '12px';\n topImage = 
;\n }\n\n return (\n \n {topImage}\n {title}\n
\n
{this.props.children}
\n
\n
\n
\n When using mobile banking, you need to carefully log on using your PIN. For your security, you\n must also be sure to log off correctly every time you finish your mobile banking session.\n
\n
\n In this short activity, we are going to practise how to log on and then log off securely.\n
\n
\n Click Start when you are ready to begin.\n
\n
\n \n There are two tasks in this activity. Follow each instruction, and if you want to read the\n instruction again, tap the{' '}\n \n \n 
{' '}\n \n button in the top right corner.\n
\n \n );\n\n app.timedStateChange({ messageVisible: true }, 3000);\n return {\n page: [ 'Login' ],\n showMenuButton: false,\n pagetitle: null,\n usernameDisabled: false,\n showSpotlight: false,\n progress: 0\n };\n }\n\n //=== PHASE 2 ===========================================//\n },\n\n {\n init(app) {\n Activity.instruction = (\n \n Let’s start by logging on using your four-digit PIN.
\n \n Carefully type in the numbers 5648 using the keypad on the next screen.\n
\n \n );\n\n app.timedStateChange({ instructionVisible: true }, 1000);\n }\n },\n\n {\n init(app) {},\n\n onPinPress(app, key) {\n let previousKeys = app.state.loginPin.length;\n let result = GenericActivity.onPinPress(app, key);\n\n if (result.loginPin.length >= 4) {\n if (result.loginPin == '5648') {\n app.updateProgress(1 / Activity.totalProgress, 'login_PIN');\n app.timedStateChange(() => {\n return {\n phase: app.state.phase + 1\n };\n }, 500);\n } else {\n if (previousKeys == 3) {\n Activity.message = (\n \n \n Your PIN is 5648.\n
\n \n Click Try again to have another go.\n
\n \n );\n let inputFields = { ...app.state.inputFields };\n inputFields.payAmount.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true,\n loginPin: ''\n };\n }\n }\n }\n\n return {\n ...result\n };\n }\n },\n //=== PHASE 3 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged on using your PIN.
\n \n To protect your money and privacy, it’s important to securely log off each time you finish your mobile banking. It’s\n an easy but vital step, so let’s see how to do that now.\n
\n \n );\n return { messageVisible: true, progress: 1 };\n }, 5000);\n return {\n page: [ 'Welcome' ],\n showMenuButton: true,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n The only fully secure way to end a mobile banking session is to carefully log off.
\n \n To do this, tap the Log off button on the next screen.\n
\n \n );\n return { instructionVisible: true };\n }, 600);\n }\n },\n //=== PHASE 4 ===========================================//\n\n //=== PHASE 5 ===========================================//\n {\n init(app) {\n app.timedStateChange({ focusOnId: 'logoffButton', spotlightFixed:true }, 2000);\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n },\n\n logoff(app) {\n app.updateProgress(2 / Activity.totalProgress, 'login_logoff', true);\n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n\n showSpotlight: false,\n spotlightTime: 0\n };\n }\n },\n //=== PHASE 6 ===========================================//\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully logged off to close your mobile banking session.\n
\n \n Click Finish to complete this activity.\n
\n \n );\n return { messageVisible: true, progress: 2 };\n }, 5000);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n//export default { ...GenericActivity, ...Activity };\n","import React from 'react';\nimport SCORM from '../../scorm';\nimport GenericActivity from './GenericActivity';\n\nimport infoIcon from '../../images/button-info.png';\n\nimport Instruction from '../UI/Instruction';\n\nconst Activity = {\n ...GenericActivity,\n\n devMode: false,\n\n instruction: null,\n\n title: 'Checking a transaction',\n totalProgress: 5,\n introduction: (\n\n \n
In this activity, we are going to see how to review an individual transfer made from our Everyday Account.
\n\n
\n Click Start when you are ready to begin.\n
\n
\n \n There are five tasks in this activity. Follow each instruction, and if you want to read the\n instruction again, tap the{' '}\n \n \n {' '}\n \n button in the top right corner.\n
\n \n );\n\n app.updateProgress(0 / Activity.totalProgress, 'trans_start');\n\n app.timedStateChange({ messageVisible: true }, 3000);\n }\n\n //=== PHASE 2 ===========================================//\n },\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n To get started, tap Accounts in the bottom left corner of the next screen to view our available\n accounts.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n onAccountsClicked(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 3 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully navigated to the Accounts list page. We are ready to choose which account we want to check.\n \n );\n return { messageVisible: true, progress: 1 };\n }, 5000);\n\n app.updateProgress(1 / Activity.totalProgress, 'trans_nav');\n return {\n showSpotlight: false,\n spotlightFixed:false,\n spotlightTime: 0,\n infoButtonDisabled: true,\n pagetitle: 'Accounts',\n page: [ 'Accounts' ]\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n Next, tap Everyday Account to view its transactions list.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n spotlightTime: 1,\n focusOnId: 'accountPanel0'\n };\n },\n\n accountPanel(app, id) {\n if (id == 0) {\n return {\n phase: app.state.phase + 1\n };\n }\n\n // console.log('trans', id);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully opened the Everyday Account transactions list.
{' '}\n \n There is a debit for $100 that was made on the 14th of July that we want to double-check.\n
\n \n );\n return { messageVisible: true, progress: 2 };\n }, 5000);\n\n app.updateProgress(2 / Activity.totalProgress, 'trans_acc');\n\n return {\n showSpotlight: false,\n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'AccountDetails' ],\n pagetitle: 'Account details'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n To view more details on that $100 debit, tap its transaction line item titled Transfer to Xx2345.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true\n },\n 8000\n );\n return {\n spotlightTime: 1,\n focusOnId: 'trans-row1'\n };\n },\n\n openTransaction(app, id) {\n if (id == 1) {\n return {\n phase: app.state.phase + 1\n };\n }\n }\n },\n //=== PHASE 4 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have opened the transaction details page and can see more details. It’s good practice to check\n transactions regularly to make sure there are no unexpected payments being made.\n
\n We are ready to end our mobile banking session now, so let’s find out how to do that next.
\n \n );\n return { messageVisible: true, progress: 3 };\n }, 5000);\n\n app.updateProgress(3 / Activity.totalProgress, 'trans_item');\n\n return {\n showSpotlight: false,\n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'TransferRecord' ],\n pagetitle: 'Transfers'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n We need to return to the Home screen so that we can log off securely.\n
\n \n To do this, tap the back arrow in the top left of the next screen, and repeat two more times to\n return to the Home screen.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 5 ===========================================//\n {\n init(app) {\n app.timedStateChange(\n {\n spotlightTime: 1,\n showSpotlight: true\n },\n 8000\n );\n return {\n focusOnId: 'left-arrow',\n spotlightPadding:null,\n spotlightFixed:true\n };\n },\n\n backButton(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n {\n init(app) {\n app.timedStateChange(\n {\n spotlightTime: 1,\n showSpotlight: true\n },\n 4000\n );\n return {\n page: [ 'AccountDetails' ],\n pagetitle: 'Account details',\n showSpotlight: false,\n spotlightTime: 0\n };\n },\n\n backButton(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n {\n init(app) {\n app.timedStateChange(\n {\n spotlightTime: 1,\n showSpotlight: true\n },\n 4000\n );\n return {\n page: [ 'Accounts' ],\n pagetitle: 'Accounts',\n showSpotlight: false,\n\n spotlightTime: 0\n };\n },\n\n backButton(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully navigated back to the Home screen. There’s only one more task to complete!\n \n );\n return { messageVisible: true, progress: 4 };\n }, 2000);\n\n app.updateProgress(4 / Activity.totalProgress, 'trans_home');\n\n return {\n showSpotlight: false,\n spotlightTime: 0,\n page: [ 'Welcome' ],\n pagetitle: null,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n The only fully secure way to end a mobile banking session is to carefully log off.
\n \n To do this, tap the Log off button on the next screen.\n
\n \n );\n return { instructionVisible: true, focusOnId: 'logoffButton' };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n logoff(app) {\n \n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n instructionVisible: false,\n spotlightTime: 0,\n showSpotlight: false\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ phase: app.state.phase + 1 }, 200);\n }\n },\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged off to close your mobile banking session.
\n
Click Finish to complete this activity.\n \n );\n return { messageVisible: true, progress: 5 };\n }, 5000);\n\n app.updateProgress(5 / Activity.totalProgress, 'trans_logoff', true);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n//export default { ...GenericActivity, ...Activity };\n","import React from 'react';\nimport SCORM from '../../scorm';\nimport GenericActivity from './GenericActivity';\n\nimport infoIcon from '../../images/button-info.png';\n\nimport Instruction from '../UI/Instruction';\n\nconst Activity = {\n ...GenericActivity,\n\n devMode: false,\n\n instruction: null,\n\n title: 'Managing statements',\n totalProgress: 6,\n introduction: (\n \n
\n With mobile banking, you can view your statements at any time – no more waiting for the postie! You can download them to your\n device and even email them to your accountant.\n
\n
In this activity, we look at where to find your statements and what you need to do to download one.
\n
\n Click Start when you are ready to begin.\n
\n
\n \n There are six tasks in this activity. Follow each instruction, and if you want to read the\n instruction again, tap the{' '}\n \n \n {' '}\n \n button in the top right corner.\n
\n \n );\n\n app.updateProgress(0 / Activity.totalProgress, 'state_start');\n\n app.timedStateChange({ messageVisible: true }, 3000);\n }\n },\n\n //=== PHASE 2 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n To get started, tap Accounts in the bottom left corner of the next screen to view our available\n accounts.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 3 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n onAccountsClicked(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n\n //=== PHASE 4 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully navigated to the Accounts list page. We are ready to choose an account from the list.\n \n );\n return { messageVisible: true, progress: 1 };\n }, 5000);\n\n app.updateProgress(1 / Activity.totalProgress, 'state_nav');\n return {\n showSpotlight: false,\n spotlightFixed:false,\n spotlightTime: 0,\n infoButtonDisabled: true,\n pagetitle: 'Accounts',\n page: [ 'Accounts' ]\n };\n }\n },\n\n //=== PHASE 5 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n Next, tap Everyday Account to view its transactions list.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 6 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n spotlightTime: 1,\n focusOnId: 'accountPanel0'\n };\n },\n\n accountPanel(app, id) {\n if (id == 0) {\n return {\n phase: app.state.phase + 1\n };\n }\n\n // console.log('trans', id);\n }\n },\n\n //=== PHASE 7 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully opened the Everyday Account transactions list.
\n We can see the most up-to-date transactions listed, but we want to find a statement for a specific month.
\n \n );\n return { messageVisible: true, progress: 2 };\n }, 5000);\n\n app.updateProgress(2 / Activity.totalProgress, 'state_acc');\n\n return {\n showSpotlight: false,\n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'AccountDetails' ],\n pagetitle: 'Account details'\n };\n }\n },\n\n //=== PHASE 8 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n Tap Statements to view a list of available statements for this account.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 9 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true\n },\n 8000\n );\n return {\n spotlightTime: 1,\n focusOnId: 'accountStatements'\n };\n },\n\n openAccountStatements(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n\n //=== PHASE 2 ===========================================================================//\n //---------------------------------------------------------------------------------------//\n //=======================================================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully opened the list of available statements for this account.
\n \n You can see each month’s statement listed on individual line items, and all you need to do to download one is\n tap on it.\n
\n \n );\n return { messageVisible: true, progress: 3 };\n }, 5000);\n\n app.updateProgress(3 / Activity.totalProgress, 'state_view');\n\n return {\n showSpotlight: false,\n \n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'Statements' ],\n pagetitle: 'Statements'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap the line item for 30 Dec 2019 on the next screen to download that month’s statement.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 5 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n spotlightTime: 1,\n showSpotlight: true\n },\n 8000\n );\n return {\n focusOnId: 'statement1'\n };\n },\n\n openStatement(app, index) {\n if (index == 1) {\n return {\n phase: app.state.phase + 1\n };\n }\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully followed the steps to download a statement using mobile banking.
\n\n \n As this is a simulation, there won’t be an actual downloaded statement on your device, but it’s that\n easy to do in real life!\n
\n\n We’re ready to end our mobile banking session now, so let’s find out how to do that next.
\n \n );\n return { messageVisible: true, progress: 4 };\n }, 5000);\n\n app.updateProgress(4 / Activity.totalProgress, 'state_download');\n\n return {\n showSpotlight: false,\n spotlightPadding:null,\n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'Downloaded' ],\n pagetitle: 'Downloaded'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n We need to return to the Home screen so that we can log off securely.\n
\n \n To do this, tap the back arrow in the top left of the next screen, and repeat three more times to\n return to the Home screen.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n spotlightTime: 1,\n showSpotlight: true\n },\n 8000\n );\n return {\n spotlightFixed:true,\n focusOnId: 'left-arrow'\n };\n },\n\n backButton(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n {\n init(app) {\n app.timedStateChange(\n {\n spotlightTime: 1,\n showSpotlight: true\n },\n 4000\n );\n return {\n page: [ 'Statements' ],\n pagetitle: 'Statements',\n showSpotlight: false,\n spotlightTime: 0\n };\n },\n\n backButton(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n {\n init(app) {\n app.timedStateChange(\n {\n spotlightTime: 1,\n showSpotlight: true\n },\n 4000\n );\n return {\n page: [ 'AccountDetails' ],\n pagetitle: 'Account details',\n showSpotlight: false,\n spotlightTime: 0\n };\n },\n\n backButton(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n {\n init(app) {\n app.timedStateChange(\n {\n spotlightTime: 1,\n showSpotlight: true\n },\n 4000\n );\n return {\n page: [ 'Accounts' ],\n pagetitle: 'Accounts',\n showSpotlight: false,\n spotlightTime: 0\n };\n },\n\n backButton(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully navigated back to the Home screen. There’s only one more task to complete!\n \n );\n return { messageVisible: true, progress: 5 };\n }, 2000);\n\n app.updateProgress(5 / Activity.totalProgress, 'state_home');\n return {\n showSpotlight: false,\n spotlightTime: 0,\n page: [ 'Welcome' ],\n pagetitle: null,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n The only fully secure way to end a mobile banking session is to carefully log off.
\n \n To do this, tap the Log off button on the next screen.\n
\n \n );\n return { instructionVisible: true, spotlightTime: 1 };\n }, 1000);\n return {\n focusOnId: 'logoffButton'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n logoff(app) {\n \n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n instructionVisible: false,\n spotlightTime: 0,\n showSpotlight: false\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ phase: app.state.phase + 1 }, 200);\n }\n },\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged off to close your mobile banking session.
\n
Click Finish to complete this activity.\n \n );\n return { messageVisible: true, progress: 6 };\n }, 5000);\n\n app.updateProgress(6 / Activity.totalProgress, 'state_logoff', true);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n//export default { ...GenericActivity, ...Activity };\n","import React from 'react';\nimport SCORM from '../../scorm';\nimport GenericActivity from './GenericActivity';\n\nimport biller from '../../images/biller.png';\nimport infoIcon from '../../images/button-info.png';\n\nimport Instruction from '../UI/Instruction';\nconst Activity = {\n ...GenericActivity,\n\n devMode: false,\n\n title: 'Transferring funds between accounts',\n instruction: null,\n\n totalProgress: 9,\n introduction: (\n \n
\n Mobile banking makes it easy and convenient to transfer funds between your accounts. You can transfer money at any time, day or\n night.\n
\n
\n In this activity, we practise transferring money from our Everyday Account to our{' '}\n Savings Account.\n
\n
\n Click Start when you are ready to begin.\n
\n
\n \n There are nine tasks in this activity. Follow each instruction, and if you want to read the\n instruction again, tap the{' '}\n \n \n {' '}\n \n button in the top right corner.\n
\n \n );\n\n app.updateProgress(0 / Activity.totalProgress, 'transfer_start');\n\n app.timedStateChange({ messageVisible: true }, 3000);\n }\n },\n\n {\n init(app) {\n Activity.instruction = (\n \n \n To get started, tap Transfers at the bottom of the next screen.\n
\n \n );\n\n app.timedStateChange({ instructionVisible: true }, 1000);\n }\n },\n\n //=== PHASE 2 ==========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n onTransferClicked(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 3 ==========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully navigated to the Transfers page. The From account is already\n correct, but we want to transfer funds to our Savings account, not our Credit Card.\n
\n \n Let’s change the To account to Savings instead.\n
\n \n );\n \n return { messageVisible: true, progress: 1 };\n }, 5000);\n\n app.updateProgress(1 / Activity.totalProgress, 'transfer_nav');\n\n return {\n showSpotlight: false,\n spotlightFixed:false,\n spotlightPadding:0,\n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'Transfer', [ 0, 2 ] ],\n focusOnId: 'accountPanel2-1',\n\n pagetitle: 'Transfers'\n };\n }\n },\n //=== PHASE 4 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap anywhere in the section with the heading Credit Card to change the To account.\n \n );\n return {\n instructionVisible: true\n };\n }, 1000);\n }\n },\n\n //=== PHASE 5 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n clickTransferAccount(app, index) {\n if (index == 1) {\n return {\n phase: app.state.phase + 1\n };\n }\n }\n },\n //=== PHASE 6 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully selected the To account, and we’re now ready to change it from the{' '}\n Credit Card to our Savings account.\n \n );\n return { messageVisible: true, progress: 2 };\n }, 5000);\n app.updateProgress(2 / Activity.totalProgress, 'transfer_acc');\n\n return {\n infoButtonDisabled: true,\n showSpotlight: false,\n spotlightPadding:null,\n spotlightTime: 0,\n page: [ 'ChooseAccount', [ 1, 2 ] ]\n };\n }\n },\n\n ///=== PHASE 7 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap on Savings on the next screen to select it as the To account.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n //=== PHASE 8 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'accountListTab0'\n };\n },\n\n accountClicked(app, index) {\n if (index == 0) {\n return {\n phase: app.state.phase + 1\n };\n }\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully changed the To account to Savings account. Let’s add the amount\n of the transfer.\n \n );\n return { messageVisible: true, progress: 3 };\n }, 2500);\n app.updateProgress(3 / Activity.totalProgress, 'transfer_savings');\n\n return {\n showSpotlight: false,\n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'Transfer', [ 0, 1 ] ],\n pagetitle: 'Transfers'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap inside the Amount box on the next screen. Carefully type 57.50, then tap the{' '}\n Done key on the keyboard.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'payAmount',\n ...GenericActivity.enableField(app, 'payAmount')\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'payAmount') {\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0.2\n };\n }\n }\n },\n //=== PHASE 9 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n return {\n focusOnId: 'keyDone-num',\n spotlightTime: 1\n };\n },\n\n onKeyPress(app, key) {\n \n let correctAnswer = '57.50';\n if(app.state.inputFields.payAmount.value == correctAnswer && key != \"Done\"){\n return\n }\n\n app.clearTimers();\n \n if (key == 'Done') {\n if (app.state.inputFields.payAmount.value == correctAnswer) {\n Activity.message = (\n \n You have successfully added the amount of our transfer. Next, let’s add a short description for our records.\n \n );\n app.updateProgress(4 / Activity.totalProgress, 'transfer_amt');\n return {\n ...GenericActivity.disableField(app, 'payAmount'),\n messageVisible: true,\n progress: 4,\n showSpotlight: false\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type 57.50 in exactly.
\n
Click Try again to have another go.\n \n );\n let inputFields = { ...app.state.inputFields };\n inputFields.payAmount.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n\n \n let result = GenericActivity.onKeyPress(app, key);\n\n\n\n let incorrect = false;\n let value = result.inputFields.payAmount.value;\n for (var i = 0; i < value.length; i++) {\n if (value[i] != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true\n };\n }, 1500);\n }\n\n result.inputFields.payAmount.incorrect = incorrect;\n\n return result;\n }\n },\n\n tryAgain(app) {\n let result = GenericActivity.tryAgain(app);\n let inputFields = { ...app.state.inputFields };\n inputFields.payAmount.value = '';\n result.inputFields = inputFields;\n return {\n ...result\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap in the Enter description box on the next screen, and carefully type{' '}\n weekly savings. Then click Done on the keyboard.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 10 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n ...GenericActivity.enableField(app, 'payDescription'),\n focusOnId: 'payDescription'\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'payDescription') {\n app.clearTimers();\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n }\n },\n {\n init(app) {\n return {\n focusOnId: 'keyDone',\n spotlightTime: 1\n };\n },\n\n onKeyPress(app, key) {\n\n let correctAnswer = 'weekly savings';\n\n\n if(app.state.inputFields.payDescription.value.toLowerCase() == correctAnswer && key != \"Done\"){\n return\n }\n app.clearTimers();\n\n\n \n if (key == 'Done') {\n let v = app.state.inputFields.payDescription.value.toLowerCase();\n if (v == correctAnswer || v == 'xxx') {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully added all the details we need to transfer our funds. Let’s review the payment details next.\n \n );\n \n return {\n messageVisible: true,\n progress: 5\n };\n }, 1000);\n\n app.updateProgress(5 / Activity.totalProgress, 'transfer_desc');\n\n return {\n ...GenericActivity.disableField(app, 'payDescription'),\n inputFieldFocus: null,\n showSpotlight: false\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type weekly savings in exactly, then press the{' '}\n Done key on the keyboard.
\n
Click Try again to have another go.\n \n );\n\n let inputFields = { ...app.state.inputFields };\n inputFields.payDescription.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n\n\n let result = GenericActivity.onKeyPress(app, key);\n\n if (!result.inputFields) {\n return {};\n }\n\n let incorrect = false;\n let value = result.inputFields.payDescription.value;\n for (var i = 0; i < value.length; i++) {\n if (value[i].toLowerCase() != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true\n };\n }, 1500);\n }\n\n result.inputFields.payDescription.incorrect = incorrect;\n\n return result;\n }\n },\n\n onPay(app) {\n Activity.message = (\n \n Check the instructions and be sure to type weekly savings in exactly, then press the{' '}\n Done key on the keyboard.
\n
Click Try again to have another go.\n \n );\n return { messageVisible: true };\n }\n },\n\n //=== PHASE 9 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n To review our transfer, click on the Transfer button on the next screen to view the Transfer summary\n details.\n \n );\n return { instructionVisible: true };\n }, 1000);\n return {\n focusOnId: 'payButton'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n disabledButtons: {\n ...app.state.disabledButtons,\n pay: false\n }\n };\n },\n\n onPay(app) {\n return {\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0.2\n };\n }\n },\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully opened the Transfer summary page, where we are able to double-check all the\n details are correct.\n
\n We’re now ready to confirm the payment.
\n \n );\n \n return { messageVisible: true, progress: 6 };\n }, 5000);\n app.updateProgress(6 / Activity.totalProgress, 'transfer_confirm');\n return {\n page: [ 'TransferSummary' ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n To confirm our payment, tap the Transfer now button on the next screen.\n \n );\n return {\n instructionVisible: true\n };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n return { showSpotlight: true, spotlightTime: 1 };\n }, 8000);\n\n return {\n disabledButtons: {\n ...app.state.disabledButtons,\n payNow: false\n },\n\n focusOnId: 'payNow'\n };\n },\n\n onPayNow(app) {\n return {\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully transferred money between accounts. We only have two more tasks to go!\n \n );\n \n return { messageVisible: true, progress: 7 };\n }, 5000);\n app.updateProgress(7 / Activity.totalProgress, 'transfer_submit');\n return {\n page: [\n 'TransferPaySuccessful',\n {\n message: 'Transfer successful',\n amount: '$57.50',\n receipt: 'N0123456789',\n fromAccount: 'Everyday Account',\n fromAccountNumber: '234 567 8901 2345',\n toAccount: 'Savings',\n toAccountNumber: '234 567 8901 2345',\n description: 'Weekly savings',\n date: [ '08 Sep 2020 12:20 PM',
, 'Syd time' ]\n }\n ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Now that we’ve made the transfer, let’s return to the Home screen by tapping Done on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'doneButton' };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n onDone(app) {\n return {\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully returned to the Home screen and almost completed this activity.
\n
\n There’s just one very important task to go.\n \n );\n return { messageVisible: true, progress: 8 };\n }, 2000);\n app.updateProgress(8 / Activity.totalProgress, 'transfer_home');\n return {\n page: [ 'Welcome' ],\n pagetitle: null,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n It’s good practise to end every mobile banking session by safely logging off.
\n
\n Tap Log off on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'logoffButton', spotlightFixed:true };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n logoff(app) {\n \n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n instructionVisible: false,\n spotlightTime: 0,\n showSpotlight: false\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ phase: app.state.phase + 1 }, 200);\n }\n },\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged off to close your mobile banking session.
\n
Click Finish to complete this activity.\n \n );\n return { messageVisible: true, progress: 9 };\n }, 5000);\n app.updateProgress(9 / Activity.totalProgress, 'transfer_logoff', true);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n//export default { ...GenericActivity, ...Activity };\n","import React from 'react';\nimport SCORM from '../../scorm';\nimport GenericActivity from './GenericActivity';\n\nimport biller from '../../images/bill.png';\nimport biller2 from '../../images/billercode.png';\nimport infoIcon from '../../images/button-info.png';\n\nimport Instruction from '../UI/Instruction';\nconst Activity = {\n ...GenericActivity,\n\n devMode: false,\n\n title: 'Adding a new biller',\n instruction: null,\n\n totalProgress: 8,\n introduction: (\n \n
\n Mobile banking makes it convenient to pay bills using something called Bill Payment (or BPAY{' '}\n for short!).\n
\n
\n In this activity, we are going to add our power company’s details as a new payee in our bank account’s{' '}\n Saved billers. Using this Saved billers feature can come in very handy for invoices or bills\n we need to pay on a regular basis.\n
\n
\n Click Start when you are ready to begin.\n
\n
\n \n There are eight tasks in this activity. Follow each instruction, and if you want to read the\n instruction again, tap the{' '}\n \n \n {' '}\n \n button in the top right corner.\n
\n \n );\n\n app.timedStateChange({ messageVisible: true }, 3000);\n\n app.updateProgress(0 / Activity.totalProgress, 'payee_start');\n\n }\n },\n\n {\n init(app) {\n Activity.instruction = (\n \n \n To get started, tap Pay someone in the bottom right corner of the next screen.\n
\n \n );\n\n app.timedStateChange({ instructionVisible: true }, 1000);\n }\n },\n\n //=== PHASE 2 ==========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n \n spotlightTime: 1\n },\n 8000\n );\n },\n\n onPaySomeoneClicked(app) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 3 ==========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have opened the list of saved billers, or payees. We are ready to add our power company as a new biller to this\n list.\n \n );\n return { messageVisible: true, progress: 1 };\n }, 5000);\n\n app.updateProgress(1 / Activity.totalProgress, 'payee_nav');\n\n return {\n showSpotlight: false,\n spotlightFixed:false,\n spotlightPadding:null,\n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'PaySomeone', { disableAddNew: false } ],\n focusOnId: 'addNewPayee',\n pagetitle: 'Pay someone'\n };\n }\n },\n //=== PHASE 4 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Now, tap on the Add new button on the next screen.\n \n );\n return {\n instructionVisible: true\n };\n }, 1000);\n }\n },\n\n //=== PHASE 5 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n addNewPayee(app, index) {\n return {\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 6 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully opened the Add new payee page. Let’s add the relevant information from our most\n recent power bill.\n \n );\n return { messageVisible: true, progress: 2 };\n }, 5000);\n\n app.updateProgress(2 / Activity.totalProgress, 'payee_addnew');\n\n return {\n infoButtonDisabled: true,\n showSpotlight: false,\n spotlightTime: 0,\n page: [ 'AddNewPayee' ]\n };\n }\n },\n\n ///=== PHASE 7 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap inside the Biller code box on the next screen. Carefully type 9562, then tap the{' '}\n Done key on the keyboard.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n //=== PHASE 8 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'newPayeeCode',\n ...GenericActivity.enableField(app, 'newPayeeCode')\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'newPayeeCode') {\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0.2,\n keyboardHint: [ 'Biller code', '9562' ]\n };\n }\n }\n },\n //=== PHASE 9 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n return {\n focusOnId: 'keyDone-num',\n spotlightTime: 1\n };\n },\n\n onKeyPress(app, key) {\n \n let correctAnswer = '9562';\n if(app.state.inputFields.newPayeeCode.value.toLowerCase() == correctAnswer && key != \"Done\"){\n return\n }\n app.clearTimers();\n if (key == 'Done') {\n let value = app.state.inputFields.newPayeeCode.value.toLowerCase();\n if (value == correctAnswer || value == '99999') {\n Activity.message = (\n \n \n You have successfully added the Biller code.\n
\n \n Underneath the Biller code on the bill is the unique Ref, or customer reference number. Let’s\n add that next.\n
\n \n );\n\n app.updateProgress(3 / Activity.totalProgress, 'payee_billcode');\n return {\n ...GenericActivity.disableField(app, 'newPayeeCode'),\n messageVisible: true,\n progress: 3,\n showSpotlight: false,\n keyboardHint: null\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type 9562 in exactly.
\n
Click Try again to have another go.\n \n );\n let inputFields = { ...app.state.inputFields };\n inputFields.newPayeeCode.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n\n \n let result = GenericActivity.onKeyPress(app, key);\n\n let incorrect = false;\n let value = result.inputFields.newPayeeCode.value.toLowerCase();\n for (var i = 0; i < value.length; i++) {\n if (value[i] != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n console.log('show done');\n return {\n showSpotlight: true\n };\n }, 1500);\n }\n\n result.inputFields.newPayeeCode.incorrect = incorrect;\n\n return result;\n }\n },\n\n tryAgain(app) {\n let result = GenericActivity.tryAgain(app);\n let inputFields = { ...app.state.inputFields };\n inputFields.newPayeeCode.value = '';\n result.inputFields = inputFields;\n return {\n ...result\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap inside the Reference box on the next screen. Carefully type 700513425, then tap\n the Done key on the keyboard.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n //=== PHASE 8 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'newPayeeReference',\n ...GenericActivity.enableField(app, 'newPayeeReference')\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'newPayeeReference') {\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0.2,\n keyboardHint: [ 'Reference', '700513425' ]\n };\n }\n }\n },\n //=== PHASE 9 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n return {\n focusOnId: 'keyDone-num',\n spotlightTime: 1\n };\n },\n\n onKeyPress(app, key) {\n \n let correctAnswer = '700513425';\n if(app.state.inputFields.newPayeeReference.value.toLowerCase() == correctAnswer && key != \"Done\"){\n return\n }\n app.clearTimers();\n if (key == 'Done') {\n let value = app.state.inputFields.newPayeeReference.value.toLowerCase();\n if (value == correctAnswer || value == '99999') {\n Activity.message = (\n \n \n You have successfully added the Ref for the Squirrel Power bill and thankfully, you won’t need\n to do that again!\n
\n We have one more key detail to add before we save this new payee, let’s do that next.
\n \n );\n\n app.updateProgress(4 / Activity.totalProgress, 'payee_billref');\n return {\n ...GenericActivity.disableField(app, 'newPayeeReference'),\n messageVisible: true,\n progress: 4,\n showSpotlight: false,\n keyboardHint: null\n };\n } else {\n Activity.message = (\n \n \n The reference number is 700513425.\n
\n \n It’s a lot to remember in one go. To help, try grouping the number as 700 513 425, but be sure to type it in without the spaces.\n
\n \n );\n let inputFields = { ...app.state.inputFields };\n inputFields.newPayeeReference.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n\n \n let result = GenericActivity.onKeyPress(app, key);\n\n let incorrect = false;\n let value = result.inputFields.newPayeeReference.value.toLowerCase();\n for (var i = 0; i < value.length; i++) {\n if (value[i] != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true\n };\n }, 1500);\n }\n\n result.inputFields.newPayeeReference.incorrect = incorrect;\n\n return result;\n }\n },\n\n tryAgain(app) {\n let result = GenericActivity.tryAgain(app);\n let inputFields = { ...app.state.inputFields };\n inputFields.newPayeeReference.value = '';\n result.inputFields = inputFields;\n return {\n ...result\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap in the Name box on the next screen, and carefully type Squirrel Power. Then click{' '}\n Done on the keyboard.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 10 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n ...GenericActivity.enableField(app, 'newPayeeName'),\n focusOnId: 'newPayeeName'\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'newPayeeName') {\n app.clearTimers();\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1,\n keyboardHint: [ 'Name', 'Squirrel Power' ]\n };\n }\n }\n },\n {\n init(app) {\n return {\n focusOnId: 'keyDone',\n spotlightTime: 1\n };\n },\n\n onKeyPress(app, key) {\n let correctAnswer = 'squirrel power';\n if(app.state.inputFields.newPayeeName.value.toLowerCase() == correctAnswer && key != \"Done\"){\n return\n }\n\n app.clearTimers();\n \n if (key == 'Done') {\n let v = app.state.inputFields.newPayeeName.value.toLowerCase();\n if (v == correctAnswer || v == 'xxx' || v == 'Electricity bill') {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully entered all the key information for the new payee, or biller.
\n We’re ready to save these details, so let’s do that next.
\n \n );\n return {\n messageVisible: true,\n progress: 5\n };\n }, 1200);\n\n app.updateProgress(5 / Activity.totalProgress, 'payee_name');\n\n return {\n ...GenericActivity.disableField(app, 'newPayeeName'),\n inputFieldFocus: null,\n showSpotlight: false,\n keyboardHint: null\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type Squirrel Power in exactly, then press the{' '}\n Done key on the keyboard.
\n
Click Try again to have another go.\n \n );\n\n let inputFields = { ...app.state.inputFields };\n inputFields.newPayeeName.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n\n \n\n let result = GenericActivity.onKeyPress(app, key);\n\n if (!result.inputFields) {\n return {};\n }\n\n let incorrect = false;\n let value = result.inputFields.newPayeeName.value.toLowerCase();\n for (var i = 0; i < value.length; i++) {\n if (value[i] != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true\n };\n }, 1500);\n }\n\n result.inputFields.newPayeeName.incorrect = incorrect;\n\n return result;\n }\n },\n\n onPay(app) {\n Activity.message = (\n \n Check the instructions and be sure to type Squirrel Power in exactly, then press the{' '}\n Done key on the keyboard.
\n
Click Try again to have another go.\n \n );\n return { messageVisible: true };\n }\n },\n\n //=== PHASE 9 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n To add the Squirrel Power details to our Saved billers list, press the Save button on\n the next screen.\n \n );\n return { instructionVisible: true };\n }, 1000);\n return {\n focusOnId: 'payButton'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n disabledButtons: {\n ...app.state.disabledButtons,\n pay: false\n }\n };\n },\n\n onPay(app) {\n return {\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0.2\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully saved the Squirrel Power details to the Saved biller list. This means you won’t need to add\n all those fiddly details again when paying Squirrel Power bills!\n
\n We only have two more tasks to go!
\n \n );\n return { messageVisible: true, progress: 6 };\n }, 5000);\n\n app.updateProgress(6 / Activity.totalProgress, 'payee_confirm');\n return {\n page: [\n 'BillerAddedSuccess',\n {\n message: 'New biller added successfully',\n name: 'Squirrel Power',\n code: '9562',\n reference: '700513425'\n }\n ]\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Now that we’ve saved the Squirrel Power biller details, let’s return to the Home screen by tapping{' '}\n Done on the next screen.\n \n );\n return { instructionVisible: true };\n }, 1000);\n return {\n focusOnId: 'doneButton'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n },\n\n onDone(app) {\n return {\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0\n };\n }\n },\n\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully returned to the Home screen and almost completed this activity.
\n
\n There’s just one very important task to go.\n \n );\n return { messageVisible: true, progress: 7 };\n }, 2000);\n\n app.updateProgress(7 / Activity.totalProgress, 'payee_home');\n return {\n page: [ 'Welcome' ],\n pagetitle: null,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n It’s good practice to end every mobile banking session by safely logging off.
\n
\n Tap Log off on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'logoffButton', spotlightFixed:true };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n logoff(app) {\n \n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n instructionVisible: false,\n spotlightTime: 0,\n showSpotlight: false\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ phase: app.state.phase + 1 }, 200);\n }\n },\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged off to close your mobile banking session.
\n
Click Finish to complete this activity.\n \n );\n return { messageVisible: true, progress: 8 };\n }, 5000);\n\n app.updateProgress(8 / Activity.totalProgress, 'payee_logoff', true);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n//export default { ...GenericActivity, ...Activity };\n","import React from 'react';\nimport SCORM from '../../scorm';\nimport GenericActivity from './GenericActivity';\n\nimport biller from '../../images/biller.png';\nimport infoIcon from '../../images/button-info.png';\n\nimport Instruction from '../UI/Instruction';\nconst Activity = {\n ...GenericActivity,\n\n devMode: false,\n\n title: 'Paying a bill',\n instruction: null,\n\n totalProgress: 10,\n introduction: (\n \n
Paying bills with mobile banking is easy at any time of the day or night. And you don’t have to stand in any queues either!
\n
\n In this activity, we are going to pay our power bill using the Squirrel Power details we added to our{' '}\n Saved billers list in the previous activity, Adding a new payee.\n
\n
\n Click Start when you are ready to begin.\n
\n
\n There are ten tasks in this activity. Follow each instruction, and if you want to read the instruction\n again, tap the button in the top right corner.\n
\n \n );\n\n app.updateProgress(0 / Activity.totalProgress, 'pay_start');\n\n app.timedStateChange({ messageVisible: true }, 3000);\n }\n },\n\n {\n init(app) {\n Activity.instruction = (\n \n \n To get started, tap Pay someone in the bottom right corner of the next screen.\n
\n \n );\n\n app.timedStateChange({ instructionVisible: true }, 1000);\n }\n },\n\n //=== PHASE 2 ==========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n onPaySomeoneClicked(app) {\n return {\n phase: app.state.phase + 1,\n\n\n };\n }\n },\n //=== PHASE 3 ==========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have opened the list of saved billers, or payees. We are ready to select one to pay our bill.\n \n );\n return { messageVisible: true, progress: 1 };\n }, 5000);\n\n app.updateProgress(1 / Activity.totalProgress, 'pay_nav');\n\n return {\n showSpotlight: false,\n spotlightFixed:false,\n spotlightTime: 0,\n infoButtonDisabled: true,\n page: [ 'PaySomeone', { disableAddNew: true } ],\n focusOnId: 'accountListTab0',\n pagetitle: 'Pay someone'\n };\n }\n },\n //=== PHASE 4 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n We want to pay our electricity bill, so tap Squirrel Power on the next screen to select it as the\n payee.\n \n );\n return {\n instructionVisible: true\n };\n }, 1000);\n }\n },\n\n //=== PHASE 5 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n accountClicked(app, index) {\n if (index == 0) {\n return {\n phase: app.state.phase + 1\n };\n }\n }\n },\n //=== PHASE 6 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully selected Squirrel Power as the payee. Let’s add the amount of our bill.\n \n );\n return { messageVisible: true, progress: 2 };\n }, 5000);\n\n app.updateProgress(2 / Activity.totalProgress, 'pay_payee');\n\n return {\n infoButtonDisabled: true,\n showSpotlight: false,\n spotlightTime: 0,\n spotlightPadding: null,\n page: [ 'payAmount' ]\n };\n }\n },\n\n ///=== PHASE 7 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap inside the Amount box on the next screen. Carefully type 210, then tap the{' '}\n Done key on the keyboard.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n //=== PHASE 8 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'payAmount',\n ...GenericActivity.enableField(app, 'payAmount')\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'payAmount') {\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0.2\n };\n }\n }\n },\n //=== PHASE 9 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n return {\n focusOnId: 'keyDone-num',\n spotlightTime: 1\n };\n },\n\n onKeyPress(app, key) {\n \n let correctAnswer = '210';\n\n if(app.state.inputFields.payAmount.value == correctAnswer && key != \"Done\"){\n return;\n }\n\n app.clearTimers();\n\n\n if (key == 'Done') {\n if (app.state.inputFields.payAmount.value == correctAnswer) {\n Activity.message = (\n \n You have successfully added the amount of our bill. Next, let’s add a short description for our records.\n \n );\n\n app.updateProgress(3 / Activity.totalProgress, 'pay_amt');\n\n return {\n ...GenericActivity.disableField(app, 'payAmount'),\n messageVisible: true,\n progress: 3,\n showSpotlight: false\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type 210 in exactly.
\n
Click Try again to have another go.\n \n );\n let inputFields = { ...app.state.inputFields };\n inputFields.payAmount.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n\n \n\n let result = GenericActivity.onKeyPress(app, key);\n\n let incorrect = false;\n let value = result.inputFields.payAmount.value;\n for (var i = 0; i < value.length; i++) {\n if (value[i] != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true\n };\n }, 4000);\n }\n\n result.inputFields.payAmount.incorrect = incorrect;\n\n return result;\n }\n },\n\n tryAgain(app) {\n let result = GenericActivity.tryAgain(app);\n let inputFields = { ...app.state.inputFields };\n inputFields.payAmount.value = '';\n result.inputFields = inputFields;\n return {\n ...result\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap in the Enter description box on the next screen, and carefully type{' '}\n Electricity bill. Then click Done on the keyboard.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 10 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n ...GenericActivity.enableField(app, 'payDescription'),\n focusOnId: 'payDescription'\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'payDescription') {\n app.clearTimers();\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n }\n },\n {\n init(app) {\n return {\n focusOnId: 'keyDone',\n spotlightTime: 1\n };\n },\n\n onKeyPress(app, key) {\n\n let correctAnswer = 'electricity bill';\n if(app.state.inputFields.payDescription.value == correctAnswer && key != \"Done\"){\n return;\n }\n\n app.clearTimers();\n \n if (key == 'Done') {\n let v = app.state.inputFields.payDescription.value;\n if (v == correctAnswer || v == 'xxx' || v == 'Electricity bill') {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully entered the required information to pay the Squirrel Power bill. It’s time to review the\n payment details.\n \n );\n\n return {\n messageVisible: true,\n progress: 4\n };\n }, 1200);\n\n app.updateProgress(4 / Activity.totalProgress, 'pay_desc');\n\n return {\n ...GenericActivity.disableField(app, 'payDescription'),\n inputFieldFocus: null,\n showSpotlight: false,\n verticalShift: 0\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type Electricity bill in exactly, then press the{' '}\n Done key on the keyboard.
\n
Click Try again to have another go.\n \n );\n\n let inputFields = { ...app.state.inputFields };\n inputFields.payDescription.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n\n \n\n let result = GenericActivity.onKeyPress(app, key);\n\n if (!result.inputFields) {\n return {};\n }\n\n let incorrect = false;\n let value = result.inputFields.payDescription.value;\n console.log(\"val\", value)\n\n let lowerValue = value.toLowerCase();\n console.log(lowerValue)\n for (var i = 0; i < lowerValue.length; i++) {\n console.log(lowerValue[i] , correctAnswer[i])\n if (lowerValue[i] != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true\n };\n }, 4000);\n }\n\n result.inputFields.payDescription.incorrect = incorrect;\n\n return result;\n }\n },\n\n onPay(app) {\n Activity.message = (\n \n Check the instructions and be sure to type Electricity bill in exactly, then press the{' '}\n Done key on the keyboard.
\n
Click Try again to have another go.\n \n );\n return { messageVisible: true };\n }\n },\n\n //=== PHASE 9 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap the Pay button on the next screen to view the Payment summary details.\n \n );\n return { instructionVisible: true };\n }, 1000);\n return {\n focusOnId: 'payButton'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n disabledButtons: {\n ...app.state.disabledButtons,\n pay: false\n }\n };\n },\n\n onPay(app) {\n return {\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0.2\n };\n }\n },\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully opened the Payment summary page where we can review the details. Before the payment can go through,\n banks will often need to send a confirmation security code via text message. Let’s request that now.\n \n );\n return { messageVisible: true, progress: 5 };\n }, 5000);\n\n app.updateProgress(5 / Activity.totalProgress, 'pay_confirm');\n\n return {\n page: [ 'PaymentSummary' ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap on the Get code button on the next screen to receive the security code notification.\n \n );\n return { instructionVisible: true, focusOnId: 'getSecurityCode' };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n onGetCode(app) {\n return {\n ...GenericActivity.enableField(app, 'securityInput'),\n showTextMessage: true,\n receivedSecurityCode: true,\n showSpotlight: false,\n spotlightTime: 0.5,\n phase: app.state.phase + 1\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n You’ve requested the security code. Let’s add this information to our payment.\n );\n return { messageVisible: true, progress: 6 };\n }, 5000);\n\n app.updateProgress(6 / Activity.totalProgress, 'pay_getcode');\n\n return {\n page: [ 'PaymentSummary' ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap on the boxes next to Security code and type the four-digit code from the text\n message. Then tap Done on the keyboard.\n \n );\n return { instructionVisible: true, focusOnId: 'getSecurityCode' };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n ...GenericActivity.enableField(app, 'securityInput'),\n focusOnId: 'securityInputBoxes'\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'securityInput') {\n app.clearTimers();\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n }\n },\n {\n init(app) {\n return {\n focusOnId: 'keyDone-num'\n };\n },\n\n // modify default behaviour for tryagain\n dismissInstructions(app, [ actionType, unlockInfo ]) {\n let result = GenericActivity.dismissInstructions(app, [ actionType, unlockInfo ]);\n\n result.inputFields = { ...app.state.inputFields };\n result.inputFields.securityInput.value = '';\n\n return result;\n },\n\n onKeyPress(app, key) {\n if (key == 'Done') {\n app.clearTimers();\n if (app.state.inputFields.securityInput.value == '1598') {\n return {\n ...GenericActivity.disableField(app, 'securityInput'),\n phase: app.state.phase + 1,\n inputFieldFocus: null,\n showTextMessage: false,\n showSecurityTick: true,\n showSpotlight: false\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type 1598 in exactly.
\n
Click Try again to have another go.\n \n );\n\n return { messageVisible: true, showSpotlight: false };\n }\n } else {\n\n \n\n let value = app.state.inputFields.securityInput.value;\n\n if(value == '1598'){\n return;\n }\n\n if (value.length < 4 || key == 'dlt') {\n let result = GenericActivity.onKeyPress(app, key);\n\n if (result.inputFields.securityInput.value.length == 4) {\n app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true,\n spotlightTime: 1\n };\n }, 2500);\n } else {\n result.showSpotlight = false;\n app.clearTimers();\n }\n\n return {\n ...result\n };\n }\n }\n }\n },\n\n //=== PHASE 10===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully entered the security code. All of the information is completed and we are ready to confirm our\n payment. Let’s do that now.\n \n );\n return { messageVisible: true, progress: 7 };\n }, 1000);\n\n app.updateProgress(7 / Activity.totalProgress, 'pay_entercode');\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n To confirm our payment, tap the Pay now button on the next screen.\n \n );\n return {\n instructionVisible: true\n };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n return { showSpotlight: true, spotlightTime: 1 };\n }, 8000);\n\n return {\n disabledButtons: {\n ...app.state.disabledButtons,\n payNow: false\n },\n\n focusOnId: 'payNow'\n };\n },\n\n onPayNow(app) {\n return {\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n You’ve successfully paid the Squirrel Power bill. We only have two more tasks to go!\n );\n return { messageVisible: true, progress: 8 };\n }, 5000);\n\n app.updateProgress(8 / Activity.totalProgress, 'pay_submit');\n\n return {\n page: [ 'PaymentReceipt' ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Now that we’ve paid our bill, let’s return to the Home screen by tapping Done on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'doneButton' };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n onDone(app) {\n return {\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully returned to the Home screen and almost completed this activity.
\n
\n There’s just one very important task to go.\n \n );\n return { messageVisible: true, progress: 9 };\n }, 2000);\n\n app.updateProgress(9 / Activity.totalProgress, 'pay_home');\n\n return {\n page: [ 'Welcome' ],\n pagetitle: null,\n spotlightFixed:true,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n It’s good practice to end every mobile banking session by safely logging off.
\n
\n Tap Log off on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'logoffButton', spotlightFixed:true };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n logoff(app) {\n \n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n instructionVisible: false,\n spotlightTime: 0,\n showSpotlight: false\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ phase: app.state.phase + 1 }, 200);\n }\n },\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged off to close your mobile banking session.
\n
Click Finish to complete this activity.\n \n );\n return { messageVisible: true, progress: 10 };\n }, 5000);\n\n app.updateProgress(10 / Activity.totalProgress, 'pay_logoff', true);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n//export default { ...GenericActivity, ...Activity };\n","import React from 'react';\nimport SCORM from '../../scorm';\nimport GenericActivity from './GenericActivity';\n\nimport biller from '../../images/biller.png';\nimport infoIcon from '../../images/button-info.png';\nimport editIcon from '../../images/edit-icon-orange.png';\n\nimport hamburger from '../../images/hamburger.png';\n\nimport Instruction from '../UI/Instruction';\nconst Activity = {\n ...GenericActivity,\n\n devMode: false,\n\n title: 'Setting transaction limits',\n instruction: null,\n\n totalProgress: 6,\n introduction: (\n \n
\n Banks have security measures to ensure the safety of your funds. One of these is to limit how much money can be transferred in\n one go. You can control these settings for your own account.\n
\n
In this activity, we show you where to find these settings and edit them for your peace of mind.
\n
\n Click Start when you are ready to begin.\n
\n
\n There are six tasks in this activity. Follow each instruction, and if you want to read the instruction\n again, tap the button in the top right corner.\n
\n \n );\n\n app.updateProgress(0 / Activity.totalProgress, 'limit_start');\n\n app.timedStateChange({ messageVisible: true }, 3000);\n }\n },\n\n {\n init(app) {\n Activity.instruction = (\n \n \n To get started, tap the menu icon in the top left corner of the next screen. It looks like three lines\n stacked together 
.\n
\n \n );\n\n app.timedStateChange({ instructionVisible: true }, 1000);\n }\n },\n\n //=== PHASE 2 ==========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n hamburgerToggle(app) {\n return {\n ...GenericActivity.hamburgerToggle(app),\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 3 ==========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully opened the main menu for the Squirrel Bank app. We can use this menu to navigate to our Transfer limits page.\n
\n \n );\n return { messageVisible: true, progress: 1 };\n }, 5000);\n\n app.updateProgress(1 / Activity.totalProgress, 'limit_nav');\n\n return {\n showSpotlight: false,\n spotlightTime: 0.5,\n infoButtonDisabled: true,\n \n // page: [ 'PaySomeone', { disableAddNew: true } ],\n // focusOnId: 'accountListTab0',\n // pagetitle: 'Pay Someone'\n };\n }\n },\n //=== PHASE 4 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Using the menus on the next screens, first tap Settings & security and then{' '}\n Transfer limits.\n \n );\n return {\n instructionVisible: true\n };\n }, 1000);\n }\n },\n\n //=== PHASE 5 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'mainMenu-settings'\n };\n },\n\n hamburgerMenuItem(app, index) {\n if (index == 4) {\n return {\n phase: app.state.phase + 1,\n hamburgerMenu: false,\n hamburgerMenu2: true\n };\n }\n }\n },\n //=== PHASE 6 ===========================================//\n //======================================================//\n //======================================================//\n\n //=== PHASE 8 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'hamburgerMenu2-1',\n ...GenericActivity.enableField(app, 'payAmount')\n };\n },\n\n hamburgerMenuItem2(app, index) {\n if (index == 1) {\n return {\n phase: app.state.phase + 1,\n hamburgerMenu: false,\n hamburgerMenu2: false,\n showSpotlight: false,\n spotlightTime: 0\n };\n }\n }\n },\n //=== PHASE 9 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully navigated to the Transfer limits review page using the app’s menus.\n
\n \n Here we can see how much can be transferred in one go from each account. We’re ready to edit the limit for our{' '}\n Everyday Account. Let’s do that next.\n
\n \n );\n return { messageVisible: true, progress: 2 };\n }, 5000);\n\n app.updateProgress(2 / Activity.totalProgress, 'limit_settings');\n\n return {\n page: [ 'TransferLimits' ],\n pagetitle: 'Transfer limits',\n spotlightFixed:false,\n focusOnId: 'edit-limit_0'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n To change the amount, tap the edit icon{' '}\n 
for the{' '}\n Everyday Account section on the next screen. It’s to the right of the $2,000.00.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n editLimitClicked(app, index) {\n if (index == 0) {\n return {\n showSpotlight: false,\n spotlightTime: 0,\n phase: app.state.phase + 1\n };\n }\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully opened the Everyday Account Maximum daily limit options page. We’re ready to set a new limit.\n
\n \n );\n return { messageVisible: true, progress: 3 };\n }, 5000);\n\n app.updateProgress(3 / Activity.totalProgress, 'limit_edit');\n\n return {\n page: [ 'ChangeLimit' ],\n infoButtonDisabled: true\n };\n }\n },\n\n //=== PHASE 10 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap $4,000 to set that as the new maximum daily limit, then tap Save.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 0.8\n },\n 8000\n );\n\n return {\n disabledButtons: {\n ...app.state.disabledButtons,\n payNow: false\n },\n focusOnId: 'limitRadial-3',\n spotlightFixed:false\n };\n },\n\n onLimitChange(app, index) {\n if (index == 3) {\n return { focusOnId: 'payNow' };\n } else {\n return { focusOnId: 'limitRadial-3' };\n }\n },\n\n limitSave(app, index) {\n if (index == 3) {\n return { phase: app.state.phase + 1 };\n } else {\n Activity.message = (\n \n Please check the instructions and be sure to tap $4,000\n
Click Try again to have another go.\n \n );\n\n return { messageVisible: true };\n }\n }\n },\n\n //=== PHASE 9 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully changed the Everyday Account daily transfer limit to $4,000. There are only\n two more tasks to go!\n
\n \n );\n return { messageVisible: true, progress: 4 };\n }, 5000);\n\n app.updateProgress(4 / Activity.totalProgress, 'limit_4000');\n return {\n showSpotlight: false,\n spotlightTime: 0,\n page: [\n 'Success',\n {\n message: 'Limit change successful',\n data: [\n { label: 'Account', value: 'Everyday Account' },\n { label: 'Daily limit', value: '$4,000' },\n {\n label: 'Date',\n value: [\n \n 12 Sep 2020 02:15 PM
(Syd time)\n \n ]\n }\n ]\n }\n ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Now that we’ve changed our limit, let’s return to the Home screen by tapping Done on the next screen.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n focusOnId: 'doneButton'\n };\n },\n\n onDone(app) {\n return {\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0\n };\n }\n },\n //=== PHASE 10 ===========================================//\n\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully returned to the Home screen and almost completed this activity.
\n
\n There’s just one very important task to go.\n \n );\n return { messageVisible: true, progress: 5 };\n }, 2000);\n\n app.updateProgress(5 / Activity.totalProgress, 'limit_save');\n return {\n page: [ 'Welcome' ],\n pagetitle: null,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n It’s good practice to end every mobile banking session by safely logging off.
\n
\n Tap Log off on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'logoffButton', spotlightFixed:true, };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n logoff(app) {\n \n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n instructionVisible: false,\n spotlightTime: 0,\n showSpotlight: false\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ phase: app.state.phase + 1 }, 200);\n }\n },\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged off to close your mobile banking session.
\n
Click Finish to complete this activity.\n \n );\n return { messageVisible: true, progress: 6 };\n }, 5000);\n\n app.updateProgress(6 / Activity.totalProgress, 'limit_logoff', true);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n//export default { ...GenericActivity, ...Activity };\n","import React from 'react';\nimport SCORM from '../../scorm';\nimport GenericActivity from './GenericActivity';\n\nimport biller from '../../images/biller.png';\nimport infoIcon from '../../images/button-info.png';\nimport hamburger from '../../images/hamburger.png';\n\nimport Instruction from '../UI/Instruction';\nconst Activity = {\n ...GenericActivity,\n\n devMode: false,\n\n title: 'Getting help and support',\n instruction: null,\n\n totalProgress: 5,\n introduction: (\n \n
\n If you have questions about your accounts, cards or other banking matters, mobile banking can help. The{' '}\n Help & support section, found on most mobile banking apps, can provide support options and useful information.\n
\n
In this activity, we look at how to find help and support when using a mobile banking app.
\n
\n Click Start when you are ready to begin.\n
\n
\n There are five tasks in this activity. Follow each instruction, and if you want to read the\n instruction again, tap the button in the top right corner.\n
\n \n );\n\n app.updateProgress(0 / Activity.totalProgress, 'help_start');\n\n app.timedStateChange({ messageVisible: true }, 3000);\n }\n },\n\n {\n init(app) {\n Activity.instruction = (\n \n \n To get started, tap the menu icon in the top left corner of the next screen. It looks like three lines\n stacked together .\n
\n \n );\n\n app.timedStateChange({ instructionVisible: true }, 1000);\n }\n },\n\n //=== PHASE 2 ==========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n hamburgerToggle(app) {\n return {\n ...GenericActivity.hamburgerToggle(app),\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 3 ==========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully opened the main menu for the Squirrel Bank app. Let’s use this menu to navigate to the{' '}\n Help and support page.\n
\n \n );\n return { messageVisible: true, progress: 1 };\n }, 5000);\n\n app.updateProgress(1 / Activity.totalProgress, 'help_nav');\n\n return {\n showSpotlight: false,\n spotlightTime: 0.5,\n infoButtonDisabled: true\n // page: [ 'PaySomeone', { disableAddNew: true } ],\n // focusOnId: 'accountListTab0',\n // pagetitle: 'Pay Someone'\n };\n }\n },\n //=== PHASE 4 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n Using the menu on the next screen, tap Help & support. It’s near the bottom of the menu options.\n
\n \n );\n return {\n instructionVisible: true\n };\n }, 1000);\n }\n },\n\n //=== PHASE 5 ===========================================//\n //======================================================//\n //======================================================//\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'mainMenu-help'\n };\n },\n\n hamburgerMenuItem(app, index) {\n if (index == 6) {\n return {\n phase: app.state.phase + 1,\n hamburgerMenu: false,\n showSpotlight: false,\n spotlightTime: 0\n };\n }\n }\n },\n //=== PHASE 6 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully opened the Squirrel Bank Help & support page, where you can see a range of\n ways to contact Squirrel Bank.\n
\n Let’s take a closer look at one of those options next.
\n \n );\n return { messageVisible: true, progress: 2 };\n }, 5000);\n\n app.updateProgress(2 / Activity.totalProgress, 'help_support');\n\n return {\n spotlightFixed:false,\n page: [ 'HelpAndSupport' ],\n pagetitle: 'Help & support',\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n \n On the next screen, tap on Contact us to see the Squirrel Bank contact details.\n
\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n focusOnId: 'helpItem-1'\n };\n },\n\n helpItemClick(app, index) {\n if (index == 1) {\n return {\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0\n };\n }\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n \n You have successfully opened the Squirrel Bank Contact us page, where you can see the phone number,\n email address and postal address details.\n
\n There are only two more tasks to go!
\n \n );\n return { messageVisible: true, progress: 3 };\n }, 5000);\n\n app.updateProgress(3 / Activity.totalProgress, 'help_contact');\n return {\n showSpotlight: false,\n spotlightTime: 0,\n page: [ 'ContactUs' ],\n \n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Now that we’ve viewed the contact information, let’s return to the Home screen by tapping Done on the\n next screen.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n focusOnId: 'doneButton'\n };\n },\n\n onDone(app) {\n return {\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0\n };\n }\n },\n //=== PHASE 10 ===========================================//\n\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully returned to the Home screen and almost completed this activity.
\n
\n There’s just one very important task to go.\n \n );\n return { messageVisible: true, progress: 4 };\n }, 2000);\n\n app.updateProgress(4 / Activity.totalProgress, 'help_done');\n return {\n page: [ 'Welcome' ],\n pagetitle: null,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n It’s good practice to end every mobile banking session by safely logging off.
\n
\n Tap Log off on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'logoffButton' };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n logoff(app) {\n \n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n instructionVisible: false,\n spotlightTime: 0,\n showSpotlight: false\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ phase: app.state.phase + 1 }, 200);\n }\n },\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged off to close your mobile banking session.
\n
Click Finish to complete this activity.\n \n );\n return { messageVisible: true, progress: 5 };\n }, 5000);\n\n app.updateProgress(5 / Activity.totalProgress, 'help_logoff', true);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n","import React from 'react';\nimport SCORM from '../../scorm';\nimport GenericActivity from './GenericActivity';\n\nimport biller from '../../images/biller.png';\nimport infoIcon from '../../images/button-info.png';\n\nimport Instruction from '../UI/Instruction';\nconst Activity = {\n ...GenericActivity,\n\n devMode: true,\n\n title: 'TEST',\n instruction: null,\n\n totalProgress: 10,\n introduction: (\n \n
Paying bills with mobile banking is easy at any time of the day or night. And you don’t have to stand in any queues either!
\n
\n In this activity, we are going to pay our power bill using the Squirrel Power details we added to our{' '}\n Saved billers list in the previous activity, Adding a new payee.\n
\n
\n Click Start when you are ready to begin.\n
\n
\n
Click Try again to have another go.\n \n );\n let inputFields = { ...app.state.inputFields };\n inputFields.payAmount.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n let result = GenericActivity.onKeyPress(app, key);\n\n let incorrect = false;\n let value = result.inputFields.payAmount.value;\n for (var i = 0; i < value.length; i++) {\n if (value[i] != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true\n };\n }, 4000);\n }\n\n result.inputFields.payAmount.incorrect = incorrect;\n\n return result;\n }\n },\n\n tryAgain(app) {\n let result = GenericActivity.tryAgain(app);\n let inputFields = { ...app.state.inputFields };\n inputFields.payAmount.value = '';\n result.inputFields = inputFields;\n return {\n ...result\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap in the Enter description box on the next screen, and carefully type{' '}\n Electricity bill. Then click Done on the keyboard.\n \n );\n return { instructionVisible: true };\n }, 1000);\n }\n },\n\n //=== PHASE 10 ===========================================//\n //======================================================//\n //======================================================//\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n ...GenericActivity.enableField(app, 'payDescription'),\n focusOnId: 'payDescription'\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'payDescription') {\n app.clearTimers();\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n }\n },\n {\n init(app) {\n return {\n focusOnId: 'keyDone',\n spotlightTime: 1\n };\n },\n\n onKeyPress(app, key) {\n app.clearTimers();\n let correctAnswer = 'electricity bill';\n if (key == 'Done') {\n let v = app.state.inputFields.payDescription.value;\n if (v == correctAnswer || v == 'xxx' || v == 'Electricity bill') {\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully entered the required information to pay the Squirrel Power bill. It’s time to review the\n payment details.\n \n );\n return {\n messageVisible: true,\n progress: 4\n };\n }, 1200);\n\n return {\n ...GenericActivity.disableField(app, 'payDescription'),\n inputFieldFocus: null,\n showSpotlight: false,\n verticalShift: 0\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type Electricity bill in exactly, then press the{' '}\n Done key on the keyboard.
\n
Click Try again to have another go.\n \n );\n\n let inputFields = { ...app.state.inputFields };\n inputFields.payDescription.value = '';\n\n return {\n inputFields: inputFields,\n messageVisible: true\n };\n }\n } else {\n let result = GenericActivity.onKeyPress(app, key);\n\n if (!result.inputFields) {\n return {};\n }\n\n let incorrect = false;\n let value = result.inputFields.payDescription.value;\n for (var i = 0; i < value.length; i++) {\n if (value[i] != correctAnswer[i]) {\n incorrect = true;\n }\n }\n\n if (incorrect || value.length != correctAnswer.length) {\n result.showSpotlight = false;\n // app.clearTimers();\n } else {\n // app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true\n };\n }, 4000);\n }\n\n result.inputFields.payDescription.incorrect = incorrect;\n\n return result;\n }\n },\n\n onPay(app) {\n Activity.message = (\n \n Check the instructions and be sure to type Electricity bill in exactly, then press the{' '}\n Done key on the keyboard.
\n
Click Try again to have another go.\n \n );\n return { messageVisible: true };\n }\n },\n\n //=== PHASE 9 ===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap the Pay button on the next screen to view the Payment summary details.\n \n );\n return { instructionVisible: true };\n }, 1000);\n return {\n focusOnId: 'payButton'\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ showSpotlight: true, spotlightTime: 1 }, 8000);\n return {\n disabledButtons: {\n ...app.state.disabledButtons,\n pay: false\n }\n };\n },\n\n onPay(app) {\n return {\n phase: app.state.phase + 1,\n showSpotlight: false,\n spotlightTime: 0.2\n };\n }\n },\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully opened the Payment summary page where we can review the details. Before the payment can go through,\n banks will often need to send a confirmation security code via text message. Let’s request that now.\n \n );\n return { messageVisible: true, progress: 5 };\n }, 5000);\n return {\n page: [ 'PaymentSummary' ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap on the Get code button on the next screen to receive the security code notification.\n \n );\n return { instructionVisible: true, focusOnId: 'getSecurityCode' };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n onGetCode(app) {\n return {\n ...GenericActivity.enableField(app, 'securityInput'),\n showTextMessage: true,\n receivedSecurityCode: true,\n showSpotlight: false,\n spotlightTime: 0.5,\n phase: app.state.phase + 1\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n You’ve requested the security code. Let’s add this information to our payment.\n );\n return { messageVisible: true, progress: 6 };\n }, 5000);\n return {\n page: [ 'PaymentSummary' ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Tap on the boxes next to Security code and type the four-digit code from the text\n message. Then tap Done on the keyboard.\n \n );\n return { instructionVisible: true, focusOnId: 'getSecurityCode' };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n return {\n ...GenericActivity.enableField(app, 'securityInput'),\n focusOnId: 'securityInputBoxes'\n };\n },\n\n customInputFocus(app, [ statekey, keyboardType, moveToId ]) {\n if (statekey == 'securityInput') {\n app.clearTimers();\n return {\n ...GenericActivity.customInputFocus(app, [ statekey, keyboardType, moveToId ]),\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n }\n },\n {\n init(app) {\n return {\n focusOnId: 'keyDone-num'\n };\n },\n\n // modify default behaviour for tryagain\n dismissInstructions(app, [ actionType, unlockInfo ]) {\n let result = GenericActivity.dismissInstructions(app, [ actionType, unlockInfo ]);\n\n result.inputFields = { ...app.state.inputFields };\n result.inputFields.securityInput.value = '';\n\n return result;\n },\n\n onKeyPress(app, key) {\n if (key == 'Done') {\n app.clearTimers();\n if (app.state.inputFields.securityInput.value == '1598') {\n return {\n ...GenericActivity.disableField(app, 'securityInput'),\n phase: app.state.phase + 1,\n inputFieldFocus: null,\n showTextMessage: false,\n showSecurityTick: true,\n showSpotlight: false\n };\n } else {\n Activity.message = (\n \n Check the instructions and be sure to type 1598 in exactly.
\n
Click Try again to have another go.\n \n );\n\n return { messageVisible: true, showSpotlight: false };\n }\n } else {\n let value = app.state.inputFields.securityInput.value;\n if (value.length < 4 || key == 'dlt') {\n let result = GenericActivity.onKeyPress(app, key);\n\n if (result.inputFields.securityInput.value.length == 4) {\n app.clearTimers();\n app.timedStateChange(() => {\n return {\n showSpotlight: true,\n spotlightTime: 1\n };\n }, 2500);\n } else {\n result.showSpotlight = false;\n app.clearTimers();\n }\n\n return {\n ...result\n };\n }\n }\n }\n },\n\n //=== PHASE 10===========================================//\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully entered the security code. All of the information is completed and we are ready to confirm our\n payment. Let’s do that now.\n \n );\n return { messageVisible: true, progress: 7 };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n To confirm our payment, tap the Pay now button on the next screen.\n \n );\n return {\n instructionVisible: true\n };\n }, 1000);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n return { showSpotlight: true, spotlightTime: 1 };\n }, 8000);\n\n return {\n disabledButtons: {\n ...app.state.disabledButtons,\n payNow: false\n },\n\n focusOnId: 'payNow'\n };\n },\n\n onPayNow(app) {\n return {\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n You’ve successfully paid the Squirrel Power bill. We only have two more tasks to go!\n );\n return { messageVisible: true, progress: 8 };\n }, 5000);\n return {\n page: [ 'PaymentReceipt' ],\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n Now that we’ve paid our bill, let’s return to the Home screen by tapping Done on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'doneButton' };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n onDone(app) {\n return {\n showSpotlight: false,\n spotlightTime: 0.2,\n phase: app.state.phase + 1\n };\n }\n },\n //=== PHASE 10 ===========================================//\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.message = (\n \n You’ve successfully returned to the Home screen and almost completed this activity.
\n
\n There’s just one very important task to go.\n \n );\n return { messageVisible: true, progress: 9 };\n }, 2000);\n return {\n page: [ 'Welcome' ],\n pagetitle: null,\n infoButtonDisabled: true\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange(() => {\n Activity.instruction = (\n \n It’s good practice to end every mobile banking session by safely logging off.
\n
\n Tap Log off on the next screen.\n \n );\n return { instructionVisible: true, focusOnId: 'logoffButton' };\n }, 600);\n }\n },\n\n {\n init(app) {\n app.timedStateChange(\n {\n showSpotlight: true,\n spotlightTime: 1\n },\n 8000\n );\n },\n\n logoff(app) {\n app.updateProgress(10 / Activity.totalProgress, 'BPAY2_logoff', true);\n return {\n phase: app.state.phase + 1,\n focusOnId: null,\n instructionVisible: false,\n spotlightTime: 0,\n showSpotlight: false\n };\n }\n },\n\n {\n init(app) {\n app.timedStateChange({ phase: app.state.phase + 1 }, 200);\n }\n },\n\n {\n init(app) {\n app.setState({\n page: [ 'LoggedOff' ],\n closeActivityVisible: false\n });\n app.timedStateChange(() => {\n Activity.message = (\n \n You have successfully logged off to close your mobile banking session.
\n
Click Finish to complete this activity.\n \n );\n return { messageVisible: true, progress: 10 };\n }, 5000);\n }\n },\n {\n init(app) {\n return {\n section: 'final-page'\n };\n }\n }\n ]\n};\nexport default Activity;\n//export default { ...GenericActivity, ...Activity };\n","/* eslint-disable */\n\nimport React from \"react\";\nimport SCORM from \"../scorm\";\n\nimport \"./App.css\";\nimport \"./generic.css\";\nimport userDataSynchroniser from \"../library/userDataSynchroniser\";\n\nimport Title from \"./Title\";\nimport SquirrelBank from \"./SquirrelBank\";\n\nimport LoggedOff from \"./LoggedOff\";\nimport FinalPage from \"./FinalPage\";\nimport TopPanel from \"./UI/TopPanel\";\nimport TopButtons from \"./UI/TopButtons\";\nimport Instructions from \"./UI/Instructions\";\nimport TextMessage from \"./UI/TextMessage\";\nimport Keyboard from \"./UI/Keyboard\";\nimport Cover from \"./UI/Cover\";\n\nimport Activity1 from \"./ActivityEventManagers/Activity1\";\nimport Activity2 from \"./ActivityEventManagers/Activity2\";\nimport Activity3 from \"./ActivityEventManagers/Activity3\";\nimport Activity4 from \"./ActivityEventManagers/Activity4\";\nimport Activity5 from \"./ActivityEventManagers/Activity5\";\nimport Activity6 from \"./ActivityEventManagers/Activity6\";\nimport Activity7 from \"./ActivityEventManagers/Activity7\";\nimport Activity8 from \"./ActivityEventManagers/Activity8\";\nimport ActivityTest from \"./ActivityEventManagers/ActivityTest\";\n//preloads\nimport biller from \"../images/biller.png\";\nimport biller2 from \"../images/biller2.png\";\nimport infoIcon from \"../images/button-info.png\";\nimport securityText from \"../images/security-text.png\";\nimport bill from \"../images/bill.png\";\nimport billcode from \"../images/billercode.png\";\n\nconst activities = [\n Activity1,\n Activity2,\n Activity3,\n Activity4,\n Activity5,\n Activity6,\n Activity7,\n Activity8,\n ActivityTest,\n];\n\nconst Activity = activities[window.activityIndex];\n\nlet devMode = false;\n\nclass App extends React.Component {\n state = {\n message: null,\n horizontalOrientation: false,\n };\n\n timers = [];\n\n squirrelPosition = null;\n\n constructor() {\n super();\n\n //IS ON MOBILE DEVICE\n this.isMobile = /(blackberry|bb10|playbook|palm|symbian|nokia|windows\\s+ce|phone|mobile|tablet|kindle|silk)/i.test(\n navigator.userAgent\n );\n\n //CHECKS PLATFORMS\n this.isMicrosoftEdge = /edge\\//i.test(navigator.userAgent);\n this.isIE =\n (/msie/i.test(navigator.userAgent) ||\n /trident/i.test(navigator.userAgent) ||\n /iemobile/i.test(navigator.userAgent)) &&\n !this.isMicrosoftEdge;\n this.isTizen = /tizen/i.test(navigator.userAgent);\n this.isAndroid =\n /android/i.test(navigator.userAgent) &&\n !this.isTizen &&\n !this.isIE &&\n !this.isMicrosoftEdge; // IE mobile and Tizen masquerade as Android\n this.isiPhone =\n (/iphone/i.test(navigator.userAgent) ||\n /ipod/i.test(navigator.userAgent)) &&\n !this.isIE &&\n !this.isMicrosoftEdge; // treat ipod as an iphone; IE mobile masquerades as iPhone\n this.isiPad = /ipad/i.test(navigator.userAgent);\n this.isiOS = this.isiPhone || this.isiPad || this.isEjecta;\n this.isiPhoneiOS6 = this.isiPhone && /os\\s6/i.test(navigator.userAgent);\n this.isChrome =\n (/chrome/i.test(navigator.userAgent) ||\n /chromium/i.test(navigator.userAgent)) &&\n !this.isIE &&\n !this.isMicrosoftEdge; // note true on Chromium-based webview on Android 4.4+; IE 'Edge' mode also pretends to be Chrome\n this.isAmazonWebApp = /amazonwebappplatform/i.test(navigator.userAgent);\n this.isFirefox = /firefox/i.test(navigator.userAgent);\n this.isSafari =\n /safari/i.test(navigator.userAgent) &&\n !this.isChrome &&\n !this.isIE &&\n !this.isMicrosoftEdge; // Chrome and IE Mobile masquerade as Safari\n this.isWindows = /windows/i.test(navigator.userAgent);\n this.isNWjs =\n typeof window[\"c2nodewebkit\"] !== \"undefined\" ||\n typeof window[\"c2nwjs\"] !== \"undefined\" ||\n /nodewebkit/i.test(navigator.userAgent) ||\n /nwjs/i.test(navigator.userAgent);\n this.isNodeWebkit = this.isNWjs; // old name for backwards compat\n this.isArcade = typeof window[\"is_scirra_arcade\"] !== \"undefined\";\n this.isWindows8App = !!(\n typeof window[\"c2isWindows8\"] !== \"undefined\" && window[\"c2isWindows8\"]\n );\n this.isWindows8Capable = !!(\n typeof window[\"c2isWindows8Capable\"] !== \"undefined\" &&\n window[\"c2isWindows8Capable\"]\n );\n this.isWindowsPhone8 = !!(\n typeof window[\"c2isWindowsPhone8\"] !== \"undefined\" &&\n window[\"c2isWindowsPhone8\"]\n );\n this.isWindowsPhone81 = !!(\n typeof window[\"c2isWindowsPhone81\"] !== \"undefined\" &&\n window[\"c2isWindowsPhone81\"]\n );\n this.isWindows10 = !!window[\"cr_windows10\"];\n this.isWinJS =\n this.isWindows8App ||\n this.isWindows8Capable ||\n this.isWindowsPhone81 ||\n this.isWindows10; // note not WP8.0\n this.isBlackberry10 = !!(\n typeof window[\"c2isBlackberry10\"] !== \"undefined\" &&\n window[\"c2isBlackberry10\"]\n );\n this.isAndroidStockBrowser =\n this.isAndroid &&\n !this.isChrome &&\n !this.isCrosswalk &&\n !this.isFirefox &&\n !this.isAmazonWebApp &&\n !this.isDomFree;\n\n Activity.app = this;\n this.dataSync = new userDataSynchroniser();\n this.loginElement = React.createRef();\n\n\n\n\n\n window.addEventListener(\"resize\", () => {\n // We execute the same script as before\n\n setTimeout(() => {\n this.setHeightVariables();\n this.checkOrientation();\n }, 100);\n\n setTimeout(() => {\n this.setHeightVariables();\n this.checkOrientation();\n }, 300);\n\n setTimeout(() => {\n this.setHeightVariables();\n this.checkOrientation();\n }, 700);\n\n setTimeout(() => {\n this.setHeightVariables();\n this.checkOrientation();\n }, 1300);\n });\n\n setTimeout(() => {\n let initHeight = this.setHeightVariables();\n this.checkOrientation();\n\n document.documentElement.style.setProperty(\n \"--initvh\",\n `${initHeight}px`\n );\n }, 200);\n }\n\n checkOrientation() {\n let width = window.innerWidth;\n // width = window.outerWidth;\n let height = window.innerHeight;\n\n // alert(\"screen width x height = \"+width + \" x \"+height)\n\n if (width > height) {\n this.setState({\n horizontalOrientation: true,\n });\n } else {\n this.setState({\n horizontalOrientation: false,\n });\n }\n\n // if(orientationCover){\n // orientationCover.bg.width = width;\n // orientationCover.bg.height = height;\n // orientationCover.warningText.x = width * 0.5;\n // orientationCover.warningText.y = height * 0.5;\n // if (width > height){\n // orientationCover.visible = true\n // }else{\n // orientationCover.visible = false\n // }\n // }\n }\n\n setHeightVariables() {\n // var width;\n var height;\n if (this.isiOS) {\n // width = window.innerWidth;\n height = window.innerHeight;\n } else {\n // width = Math.min(window.innerWidth, window.outerWidth);\n height = Math.min(window.innerHeight, window.outerHeight);\n }\n\n let vh = height * 0.01;\n\n // Then we set the value in the --vh custom property to the root of the document\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`);\n\n return vh;\n }\n\n clearTimers = () => {\n for (var i = this.timers.length - 1; i >= 0; i--) {\n clearTimeout(this.timers[i]);\n this.timers.splice(i, 1);\n }\n };\n\n restartState = () => {\n this.clearTimers();\n\n this.setState(Activity.getInitialState());\n\n setTimeout(() => {\n window.scrollTo(0, 0);\n }, 200);\n setTimeout(() => {\n window.scrollTo(0, 0);\n }, 500);\n\n if (this.loginElement.current) {\n this.loginElement.current.resetField();\n }\n };\n\n scrollElementIntoView = (elementID) => {\n let element = document.getElementById(elementID);\n element.scrollIntoView({\n behavior: \"smooth\",\n block: \"center\",\n });\n };\n\n moveElementAboveKeyboard = (elementID) => {\n let element = document.getElementById(elementID);\n var rect = element.getBoundingClientRect();\n console.log(rect.top, rect.right, rect.bottom, rect.left);\n\n let keyboard = document.getElementById(\"keyboard\");\n var keyboardRect = keyboard.getBoundingClientRect();\n\n let keyboardRestStop =\n window.innerHeight - (keyboardRect.bottom - keyboardRect.top) - 8;\n\n let overshoot = rect.bottom - keyboardRestStop;\n // console.log(overshoot);\n\n let newShift = this.state.verticalShift + overshoot;\n\n if (overshoot > 0) {\n this.setState({\n fixPageWrapper: true,\n verticalShift: newShift,\n });\n }\n\n // if (overshoot > 0) {\n // this.setState({\n // fixPageWrapper: true,\n // verticalShift: overshoot\n // });\n // }\n\n //console.log(keyboardRect.bottom - keyboardRect.top);\n };\n\n updatePosition = (position) => {\n let main = document.getElementById(\"main\");\n let mainLeft = 0;\n let mainTop = 0;\n if (main) {\n let pos = main.getBoundingClientRect();\n mainLeft = pos.left;\n mainTop = pos.top;\n }\n\n let focusBox = {\n left: position.left - mainLeft,\n top: position.top + document.documentElement.scrollTop,\n width: position.width,\n height: position.height,\n };\n\n this.setState({\n focusBox: focusBox,\n });\n };\n\n componentDidMount() {\n let timer = setTimeout(() => {\n SCORM.initScorm();\n // let existingUserData = this.dataSync.loadUserData();\n\n // this.setState(existingUserData);\n }, 100);\n\n //this.squirrelPosition = document.getElementById('main').getBoundingClientRect();\n\n // fetch('https://raw.githubusercontent.com/Craig-Stowers/testsite/master/README.md').then(function(response) {\n // response.text().then(function(text) {\n // console.log(text);\n // });\n // });\n\n document.addEventListener(\"keyup\", (e) => {\n if (e.key == \"Enter\") {\n this.squirrelEventHandler(\"onHideKeyboard\", e.key);\n }\n });\n\n window.onscroll = (ev) => {\n console.log(\"scroll\");\n };\n\n this.restartState();\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (prevState !== this.state) {\n // this.dataSync.saveUserData(this.state);\n }\n\n if (this.state.phase != prevState.phase) {\n Activity.phases &&\n Activity.phases[this.state.phase] &&\n this.setState(Activity.phases[this.state.phase].init(this));\n }\n\n if (this.state.page != prevState.page) {\n window.scrollTo(0, 0);\n }\n }\n\n updateProgress(progress, action, isComplete = false) {\n let score = Math.round(progress * 100);\n console.log(\"update scorm score\", score);\n SCORM.scormProcessSetValue(\"cmi.core.score.raw\", score.toString());\n\n if (isComplete) {\n console.log(\"set scorm complete\");\n SCORM.setLessonStatusComplete();\n }\n\n let eventAction = `${score}% | ${action}`;\n let gaData = {\n hitType: \"event\",\n eventCategory: \"Squirrel Bank Mobile\",\n eventLabel: Activity.title,\n eventAction: eventAction,\n };\n\n console.log(\"update GA:\", gaData);\n\n if (window.ga && window.ga.create) {\n window.ga(\"send\", gaData);\n } else {\n // GA is not available, the event will not reach GA\n console.log(\"GA event not sent because GA is not available\");\n }\n }\n\n exitActivity = (e) => {\n setTimeout(() => {\n document.getElementById(\"exitButton\").click();\n }, 100);\n };\n\n onRestartClick = (e) => {\n this.restartState();\n };\n\n nextTaskClick = (e) => {\n this.setState({\n task: 2,\n showNextTaskButton: false,\n message: 1,\n });\n };\n\n timedStateChange(newState, time) {\n let currPhase = this.state.phase;\n\n if (Activity.devMode || devMode) {\n time = time * 0.1;\n }\n\n let timer = setTimeout(() => {\n if (this.state.phase == currPhase) {\n this.setState(newState);\n }\n for (var i = 0; i < this.timers.length; i++) {\n if (timer == this.timers[i]) {\n this.timers.splice(i, 1);\n }\n }\n }, time);\n this.timers.push(timer);\n }\n\n changeState = (state) => {\n this.setState(state);\n };\n\n squirrelEventHandler = (eventname, args) => {\n let self = this;\n if (\n Activity.phases &&\n Activity.phases[this.state.phase] &&\n Activity.phases[this.state.phase][eventname]\n ) {\n this.setState(\n Activity.phases[this.state.phase][eventname](\n self,\n args,\n this.changeState\n )\n );\n } else if (Activity[eventname]) {\n this.setState(Activity[eventname](self, args, this.changeState));\n }\n Activity.allEvents && Activity.allEvents(this, eventname, args);\n };\n\n getSquirrelBank = () => {\n let phase = null;\n if (Activity.devMode) {\n // phase = this.state.phase;\n // phase = this.state.testVersion;\n }\n\n return (\n \n
\n\n
\n\n
\n\n
\n {!this.state.lastPage && (\n
\n \n \n \n
\n )}\n
\n this.squirrelEventHandler(\"logoff\")}\n rollovers={this.state.rollovers}\n />\n
\n {this.state.page[0] == \"LoggedOff\" && (\n
\n this.squirrelEventHandler(\"LoggedOff__continue\")\n }\n />\n )}\n \n
\n
\n Please rotate your device\n
\n
This Practice Area is designed for use in Portrait Mode
\n
\n
\n\n {this.state.section == \"title\" && (\n
\n )}\n {this.state.section == \"squirrelbank\" && this.getSquirrelBank()}\n {this.state.section == \"final-page\" && (\n
\n )}\n\n
\n
\n \n