How do I access values from previous steps when using Web View Steps? Answered
I wanted to check with you about some Web View Step details for the some of the steps that I am building.
It looks like we want the date validation to happen in a separate step following the step where the data is entered,
I think something like this could work if the validation step could check the dates and then redirect the user to the previous step if the validation fails, but it seems that this is only possible in MyDataHelps applications and not Web View steps as per https://developer.mydatahelps.org/sdk/navigation.html#navigate-the-participant-back-one-step.
I think an alternative could be to do the validation in the data input step and recreate it as a Web View step itself something more like:
Comments
1 comment
Hi,
I have a few ideas for accomplishing the date validation.
Using Navigation Logic
You could use the Navigation logic in MyDataHelps Designer to drive the behavior you are looking for. I have created a survey (Raw Survey template below) that shows how to do this in the "VaccineScreener" and "InvalidVaccination" steps.
In the survey, you'll see that the "InvalidVaccination" step uses the responses from the "VaccineScreener" step to show/not show a message and determine which step to proceed to. The default step to move to is the next one.
Web View Steps for Accessing Previous Step Answers
I also wanted to share an example from a different study that outlines how to use Web View steps to access responses from previous steps to do more custom logic. I have included the relevant steps in the survey raw template below.
In the survey, the EligibilityScreener asks for a participant's DOB and confirmation that the participant is the one asking the questions. Based on these responses, in the "GetPreviousStepAnswersAndUse" step, we determine if we need to deliver a message and publish a specific result.
You can see how the "getAnswer" function in the Web View can be used to retrieve info from previous steps. We also use this auto-submit design using window.onload in the case we just want to perform calculations and proceed without displaying anything back to the participant.
This may also be helpful for other situations moving forward.
**Create a new survey in your workspace and paste the raw survey template below into your new survey**
{
"type": "MyDataHelpsNavigableOrderedTask",
"name": "Survey",
"identifier": "Survey",
"steps": [
{
"type": "InstructionStep",
"text": "Come back here if too young",
"title": "Pass through here first, but",
"identifier": "Intro"
},
{
"type": "FormStep",
"text": "",
"title": "Please answer the following questions",
"identifier": "VaccineScreener",
"validationRules": [],
"formItems": [
{
"identifier": "VaccineDate",
"type": "FormItem",
"answerFormat": {
"type": "DateAnswerFormat",
"style": "Date",
"minimumDate": {
"type": "RelativeDate",
"fromStartOfDay": "true",
"offsetYears": -100,
"offsetMonths": 0,
"offsetWeeks": 0,
"offsetDays": 0,
"offsetHours": 0,
"offsetMinutes": 0
},
"maximumDate": {
"type": "RelativeDate",
"fromStartOfDay": "true",
"offsetYears": 0,
"offsetMonths": 0,
"offsetWeeks": 0,
"offsetDays": 0,
"offsetHours": 0,
"offsetMinutes": 0
},
"demographicField": "DateOfBirth",
"defaultDate": {
"type": "RelativeDate",
"fromStartOfDay": "true",
"offsetYears": -1,
"offsetMonths": 0,
"offsetWeeks": 0,
"offsetDays": 0,
"offsetHours": 0,
"offsetMinutes": 0
}
},
"optional": false,
"text": "What is the participant's vaccine?"
}
],
"optional": false,
"html": "<!DOCTYPE html>\n<html>\n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">\n <meta charset=\"utf-8\" />\n <meta name=\"theme-color\" content=\"#ffffff\" />\n\t<link rel=\"stylesheet\" href=\"https://safercovid.org/mytest/instructionstep.css\"/>\n <style>\n h1{color:#EC6D18;font-size:24px;line-height:1.2}\n </style>\n \n <script src=\"https://rkstudio-customer-assets.s3.amazonaws.com/Shared/rkstudio-client/MyDataHelps.0.6.0.dev.js\"></script>\n</head>\n<body style=\"display:none\">\n <div class=\"consent-container\">\n <div style=\"text-align:center;margin-bottom:16px\">\n </div>\n <h1 style=\"color:black;\"> <b>Before we continue...</b></h1>\n \n <p id=\"message-insert\"></p>\n \n</div>\n \t<div class=\"next-button\">\n <button id=\"next\" onclick=\"submit()\">I'm ready now</button>\n </div>\n \t<script type=\"text/javascript\">\n function getAnswer(stepIdentifier, resultIdentifier) {\n if ( !window.taskResult ) return null;\n\n resultIdentifier = resultIdentifier || stepIdentifier;\n\n var stepResult = window.taskResult.StepResults.find(function(stepResult) {\n return stepResult.Identifier === stepIdentifier;\n });\n if ( !stepResult ) return [];\n\n var questionResult = stepResult.QuestionResults.find(function(questionResult) {\n return questionResult.Identifier === resultIdentifier;\n });\n if ( !questionResult ) return [];\n\n var answer = [questionResult.Answer];\n if ( questionResult.Choices )\n {\n answer = questionResult.Choices;\n }\n if ( questionResult.Result )\n {\n answer = [questionResult.Result];\n }\n\n return answer;\n }\n \n function getMessage() {\n if(!window.taskResult) { return null; }\n var message = \"\";\n var DOB = getAnswer(\"EligibilityScreener\", \"DOB\");\n console.log(\"DOB:\");\n console.log(DOB);\n var isParticipant = getAnswer(\"EligibilityScreener\", \"ParticipantConfirmation\");\n console.log(\"isParticipant:\");\n console.log(isParticipant == \"true\");\n\n var age = (new Date() - new Date(DOB))/ (1000*60*60*24*365.25);\n console.log(\"age:\");\n console.log(age);\n\n if (age < 18 && age >= 14 && isParticipant ==\"true\") {\n message = \"Please have a parent or guardian with you while completing this questionnaire\";\n\n }\n\n if(age >= 18 && isParticipant != \"true\"){\n message = \"Please ask the participant to fill out this form\";\n }\n \n console.log(message);\n \n document.getElementById('message-insert').innerHTML = message;\n \n return(age);\n\n }\n\n window.onload = getMessage;\n \n getMessage();\n \n \n\n function submit(){\n var age = getMessage();\n \n var participantType = age >= 18 ? \"Adult\" : \"Child\";\n console.log(participantType);\n window.webkit.messageHandlers.ResearchKit.postMessage(participantType);\n }\n\n \n \t</script>\n</body>\n</html>"
},
{
"type": "InstructionStep",
"text": "Error: the date of your vaccine must be between 12/01/2020 and before today.",
"title": "",
"identifier": "InvalidVaccination",
"skipNavigationRule": {
"type": "PredicateSkipStepNavigationRule",
"resultPredicate": {
"resultIdentifier": "VaccineDate",
"stepIdentifier": "VaccineScreener",
"type": "DateQuestionResultPredicate",
"minimumExpectedDate": "2020-12-01T00:00:00",
"maximumExpectedDate": {
"type": "RelativeDate",
"fromStartOfDay": "true",
"offsetYears": 0,
"offsetMonths": 0,
"offsetWeeks": 0,
"offsetDays": 0,
"offsetHours": 0,
"offsetMinutes": 0
}
}
},
"navigationRule": {
"type": "PredicateStepNavigationRule",
"resultPredicateDestinations": [
{
"type": "ResultPredicateDestination",
"destinationStepIdentifier": "Intro",
"resultPredicate": {
"type": "NotCompoundPredicate",
"subpredicate": {
"resultIdentifier": "VaccineDate",
"stepIdentifier": "VaccineScreener",
"type": "DateQuestionResultPredicate",
"minimumExpectedDate": "2020-12-01T00:00:00",
"maximumExpectedDate": {
"type": "RelativeDate",
"fromStartOfDay": "true",
"offsetYears": 0,
"offsetMonths": 0,
"offsetWeeks": 0,
"offsetDays": 0,
"offsetHours": 0,
"offsetMinutes": 0
}
}
}
}
]
}
},
{
"type": "WebViewStep",
"text": "",
"title": "",
"identifier": "FamilyMember",
"html": "<!DOCTYPE html>\n<html>\n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">\n <meta charset=\"utf-8\" />\n <meta name=\"theme-color\" content=\"#ffffff\" />\n <link rel=\"stylesheet\" href=\"https://rkstudio-customer-assets.s3.amazonaws.com/Shared/font-awesome/4.7.0/css/font-awesome.min.css\" />\n <script\n src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\n integrity=\"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=\"\n crossorigin=\"anonymous\"></script>\n \t<link rel=\"stylesheet\" href=\"https://safercovid.org/mytest/instructionstep.css\"/>\n </head>\n<body style=\"display:none\">\n <div class=\"consent-container\">\n <h1>Who is taking the test?</h1>\n \t<p>You may perform the test for yourself or a member of your family or household. The at-home tests are authorized for use with ages 2 and up.</p>\n \t<div class=\"family-members\">\n \t</div>\n \t<div class=\"someone-else-entry\" style=\"display:none\">\n \t\t<input class=\"name-entry\" type=\"text\"placeholder=\"Enter name or nickname\"/>\n <div class=\"next-button\" style=\"padding-left:0;padding-right:0\">\n <button disabled id=\"next\" onclick=\"submitNewMember()\">Next</button>\n </div>\n \t</div>\n </div>\n \t<span style=\"display:none\" class=\"family\">\n <%CustomField.FamilyMembers%>\n \t</span>\n <script type=\"text/javascript\">\n \n \tvar familyMemberString = $(\".family\").html().trim();\n \tif(familyMemberString.indexOf('CustomField.FamilyMembers') != -1) { familyMemberString = '[\"Jane\",\"John\"]'; }\n \t\n \tvar familyMembers = [];\n \tif(familyMemberString)\n {\n \t\tfamilyMembers = JSON.parse(familyMemberString);\n }\n \n \tif(familyMembers.length == 0)\n {\n \t$(\".family-members\").hide();\n \t$(\".someone-else-entry\").show();\n }\n \n \tfor(var i = 0; i < familyMembers.length; i++)\n {\n \t$(\".family-members\").append(\"<div class='family-member next'><span class='value'>\" + familyMembers[i] + \"</span><i class='fa fa-chevron-right'></i></div>\");\n }\n \t$(\".family-members\").append('<div class=\"family-member someone-else\"><span class=\"value\">Someone else</span><i class=\"fa fa-plus-circle\"></i></div>');\n \n \t$(\".family-member.next\").click(function(){\n \twindow.webkit.messageHandlers.ResearchKit.postMessage($(this).find(\".value\").html());\n });\n \n \t$(\".family-member.someone-else\").click(function(){\n \t$(\".family-members\").hide();\n \t$(\".someone-else-entry\").show();\n });\n \n \n \t$(\".name-entry\").on(\"keyup\", function(){\n if($(\".name-entry\").val()){\n $(\"#next\").removeAttr(\"disabled\");\n } else { \n $(\"#next\").prop(\"disabled\", \"disabled\");\n }\n });\n \n \tfunction submitNewMember()\n \t{\n \twindow.webkit.messageHandlers.ResearchKit.postMessage($(\".name-entry\").val());\n }\n </script>\n</body>\n</html>",
"localizations": {
"es": {
"html": "<!DOCTYPE html>\n<html>\n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">\n <meta charset=\"utf-8\" />\n <meta name=\"theme-color\" content=\"#ffffff\" />\n <link rel=\"stylesheet\" href=\"https://rkstudio-customer-assets.s3.amazonaws.com/Shared/font-awesome/4.7.0/css/font-awesome.min.css\" />\n <script\n src=\"https://code.jquery.com/jquery-3.6.0.min.js\"\n integrity=\"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=\"\n crossorigin=\"anonymous\"></script>\n \t<link rel=\"stylesheet\" href=\"https://safercovid.org/mytest/instructionstep.css\"/>\n </head>\n<body style=\"display:none\">\n <div class=\"consent-container\">\n <h1>¿Quién realiza la prueba?</h1>\n<p>Puede realizarse la prueba usted mismo o a un miembro de su familia o conviviente. Las pruebas domiciliarias están autorizadas para su uso en personas a partir de los 8 años.</p>\n \t<div class=\"family-members\">\n \t</div>\n \t<div class=\"someone-else-entry\" style=\"display:none\">\n \t\t<input class=\"name-entry\" type=\"text\"placeholder=\"Ingresa tu nombre o apodo\"/>\n <div class=\"next-button\" style=\"padding-left:0;padding-right:0\">\n <button disabled id=\"next\" onclick=\"submitNewMember()\">Siguiente</button>\n </div>\n \t</div>\n </div>\n \t<span style=\"display:none\" class=\"family\">\n <%CustomField.FamilyMembers%>\n \t</span>\n <script type=\"text/javascript\">\n \n \tvar familyMemberString = $(\".family\").html().trim();\n \tif(familyMemberString.indexOf('CustomField.FamilyMembers') != -1) { familyMemberString = '[\"Jane\",\"John\"]'; }\n \t\n \tvar familyMembers = [];\n \tif(familyMemberString)\n {\n \t\tfamilyMembers = JSON.parse(familyMemberString);\n }\n \n \tif(familyMembers.length == 0)\n {\n \t$(\".family-members\").hide();\n \t$(\".someone-else-entry\").show();\n }\n \n \tfor(var i = 0; i < familyMembers.length; i++)\n {\n \t$(\".family-members\").append(\"<div class='family-member next'><span class='value'>\" + familyMembers[i] + \"</span><i class='fa fa-chevron-right'></i></div>\");\n }\n \t$(\".family-members\").append('<div class=\"family-member someone-else\"><span class=\"value\">Otra persona</span><i class=\"fa fa-plus-circle\"></i></div>');\n \n \t$(\".family-member.next\").click(function(){\n \twindow.webkit.messageHandlers.ResearchKit.postMessage($(this).find(\".value\").html());\n });\n \n \t$(\".family-member.someone-else\").click(function(){\n \t$(\".family-members\").hide();\n \t$(\".someone-else-entry\").show();\n });\n \n \n \t$(\".name-entry\").on(\"keyup\", function(){\n if($(\".name-entry\").val()){\n $(\"#next\").removeAttr(\"disabled\");\n } else { \n $(\"#next\").prop(\"disabled\", \"disabled\");\n }\n });\n \n \tfunction submitNewMember()\n \t{\n \twindow.webkit.messageHandlers.ResearchKit.postMessage($(\".name-entry\").val());\n }\n </script>\n</body>\n</html>"
}
},
"customField": "CurrentFamilyMember"
},
{
"type": "FormStep",
"text": "",
"title": "Please answer the following questions",
"identifier": "EligibilityScreener",
"validationRules": [],
"formItems": [
{
"identifier": "DOB",
"type": "FormItem",
"answerFormat": {
"type": "DateAnswerFormat",
"style": "Date",
"minimumDate": {
"type": "RelativeDate",
"fromStartOfDay": "true",
"offsetYears": -100,
"offsetMonths": 0,
"offsetWeeks": 0,
"offsetDays": 0,
"offsetHours": 0,
"offsetMinutes": 0
},
"maximumDate": {
"type": "RelativeDate",
"fromStartOfDay": "true",
"offsetYears": 0,
"offsetMonths": 0,
"offsetWeeks": 0,
"offsetDays": 0,
"offsetHours": 0,
"offsetMinutes": 0
},
"demographicField": "DateOfBirth",
"defaultDate": {
"type": "RelativeDate",
"fromStartOfDay": "true",
"offsetYears": -18,
"offsetMonths": 0,
"offsetWeeks": 0,
"offsetDays": 0,
"offsetHours": 0,
"offsetMinutes": 0
}
},
"optional": false,
"text": "What is the participant's Date of Birth?"
},
{
"identifier": "ParticipantConfirmation",
"type": "FormItem",
"answerFormat": {
"type": "BooleanAnswerFormat"
},
"optional": false,
"text": "Are you the participant?"
}
],
"optional": false,
"html": "<!DOCTYPE html>\n<html>\n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">\n <meta charset=\"utf-8\" />\n <meta name=\"theme-color\" content=\"#ffffff\" />\n\t<link rel=\"stylesheet\" href=\"https://safercovid.org/mytest/instructionstep.css\"/>\n <style>\n h1{color:#EC6D18;font-size:24px;line-height:1.2}\n </style>\n \n <script src=\"https://rkstudio-customer-assets.s3.amazonaws.com/Shared/rkstudio-client/MyDataHelps.0.6.0.dev.js\"></script>\n</head>\n<body style=\"display:none\">\n <div class=\"consent-container\">\n <div style=\"text-align:center;margin-bottom:16px\">\n </div>\n <h1 style=\"color:black;\"> <b>Before we continue...</b></h1>\n \n <p id=\"message-insert\"></p>\n \n</div>\n \t<div class=\"next-button\">\n <button id=\"next\" onclick=\"submit()\">I'm ready now</button>\n </div>\n \t<script type=\"text/javascript\">\n function getAnswer(stepIdentifier, resultIdentifier) {\n if ( !window.taskResult ) return null;\n\n resultIdentifier = resultIdentifier || stepIdentifier;\n\n var stepResult = window.taskResult.StepResults.find(function(stepResult) {\n return stepResult.Identifier === stepIdentifier;\n });\n if ( !stepResult ) return [];\n\n var questionResult = stepResult.QuestionResults.find(function(questionResult) {\n return questionResult.Identifier === resultIdentifier;\n });\n if ( !questionResult ) return [];\n\n var answer = [questionResult.Answer];\n if ( questionResult.Choices )\n {\n answer = questionResult.Choices;\n }\n if ( questionResult.Result )\n {\n answer = [questionResult.Result];\n }\n\n return answer;\n }\n \n function getMessage() {\n if(!window.taskResult) { return null; }\n var message = \"\";\n var DOB = getAnswer(\"EligibilityScreener\", \"DOB\");\n console.log(\"DOB:\");\n console.log(DOB);\n var isParticipant = getAnswer(\"EligibilityScreener\", \"ParticipantConfirmation\");\n console.log(\"isParticipant:\");\n console.log(isParticipant == \"true\");\n\n var age = (new Date() - new Date(DOB))/ (1000*60*60*24*365.25);\n console.log(\"age:\");\n console.log(age);\n\n if (age < 18 && age >= 14 && isParticipant ==\"true\") {\n message = \"Please have a parent or guardian with you while completing this questionnaire\";\n\n }\n\n if(age >= 18 && isParticipant != \"true\"){\n message = \"Please ask the participant to fill out this form\";\n }\n \n console.log(message);\n \n document.getElementById('message-insert').innerHTML = message;\n \n return(age);\n\n }\n\n window.onload = getMessage;\n \n getMessage();\n \n \n\n function submit(){\n var age = getMessage();\n \n var participantType = age >= 18 ? \"Adult\" : \"Child\";\n console.log(participantType);\n window.webkit.messageHandlers.ResearchKit.postMessage(participantType);\n }\n\n \n \t</script>\n</body>\n</html>"
},
{
"type": "WebViewStep",
"text": "",
"title": "Please answer the following questions",
"identifier": "GetPreviousStepAnswersAndUse",
"validationRules": [],
"html": "<!DOCTYPE html>\n<html>\n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">\n <meta charset=\"utf-8\" />\n <meta name=\"theme-color\" content=\"#ffffff\" />\n\t<link rel=\"stylesheet\" href=\"https://safercovid.org/mytest/instructionstep.css\"/>\n <style>\n h1{color:#EC6D18;font-size:24px;line-height:1.2}\n </style>\n <style>\n body {\n height: 95%;\n position: relative;\t\t\t\t\n font-family: Helvetica, Arial, sans-serif;\t\t\t\t\n font-size: 1.2em;\n text-align: center;\n }\n\n #message {\t\t\t\n display: none;\n padding-top: 80px;\n }\n\n #spinner {\n border: 5px solid #f3f3f3;\n border-top: 5px solid #366DBC;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n margin: 0 auto;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n </style>\n \n <script src=\"https://rkstudio-customer-assets.s3.amazonaws.com/Shared/rkstudio-client/MyDataHelps.0.6.0.dev.js\"></script>\n</head>\n<body style=\"display:none\">\n <div class=\"consent-container\">\n\n <div id=\"message-insert\">\n \t<div id=\"spinner\"></div>\t\n </div>\n \n \n</div>\n\n \t<script type=\"text/javascript\">\n function getAnswer(stepIdentifier, resultIdentifier) {\n if ( !window.taskResult ) return null;\n\n resultIdentifier = resultIdentifier || stepIdentifier;\n\n var stepResult = window.taskResult.StepResults.find(function(stepResult) {\n return stepResult.Identifier === stepIdentifier;\n });\n if ( !stepResult ) return [];\n\n var questionResult = stepResult.QuestionResults.find(function(questionResult) {\n return questionResult.Identifier === resultIdentifier;\n });\n if ( !questionResult ) return [];\n\n var answer = [questionResult.Answer];\n if ( questionResult.Choices )\n {\n answer = questionResult.Choices;\n }\n if ( questionResult.Result )\n {\n answer = [questionResult.Result];\n }\n\n return answer;\n }\n \n function getMessage() {\n if(!window.taskResult) { return null; }\n var needMessage = false;\n var message = '<h1 style=\"color:black;\"> <b>Before we continue...</b></h1><br>';\n var DOB = getAnswer(\"EligibilityScreener\", \"DOB\");\n console.log(\"DOB:\");\n console.log(DOB);\n var isParticipant = getAnswer(\"EligibilityScreener\", \"ParticipantConfirmation\");\n console.log(\"isParticipant:\");\n console.log(isParticipant == \"true\");\n\n var age = (new Date() - new Date(DOB))/ (1000*60*60*24*365.25);\n console.log(\"age:\");\n console.log(age);\n \n if(age < 2) {\n console.log(\"TooYoung\");\n window.webkit.messageHandlers.ResearchKit.postMessage(\"TooYoungIneligible\");\n return(age);\n }\n\n if (age < 18 && age >= 2 && isParticipant ==\"true\") {\n message += '<p style=\"text-align:left\"> Please have a parent or guardian with you while completing this questionnaire </p>';\n needMessage = true;\n\n }\n\n if(age >= 18 && isParticipant != \"true\"){\n message += '<p style=\"text-align:left\">Please ask the participant to fill out this form</p>';\n needMessage = true;\n }\n \n \n message += '<div class=\"next-button\"><button id=\"next\" onclick=\"submit()\">Okay! I\\'m ready to continue</button></div>'\n console.log(message);\n \n if (needMessage) {\n document.getElementById('message-insert').innerHTML = message;\n } else {\n window.webkit.messageHandlers.ResearchKit.postMessage(\"NoAdditionalDetails\");\n\n }\n \n \n \n return(age);\n\n }\n\n window.onload = getMessage;\n \n getMessage();\n \n \n\n function submit(){\n window.webkit.messageHandlers.ResearchKit.postMessage(\"complete\");\n }\n\n \n \t</script>\n</body>\n</html>"
},
{
"type": "QuestionStep",
"text": "",
"title": "This is a test",
"identifier": "date1",
"answerFormat": {
"type": "DateAnswerFormat",
"style": "Date"
},
"optional": false
},
{
"type": "QuestionStep",
"text": "",
"title": "This is a test 2",
"identifier": "date2",
"answerFormat": {
"type": "DateAnswerFormat",
"style": "Date"
},
"optional": false
},
{
"type": "WebViewStep",
"text": "",
"title": "",
"identifier": "test_validate",
"html": "<!DOCTYPE html>\n<html>\n<head>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\">\n <script src=\"https://cdn.careevolution.com/mydatahelps-js/2.1.0/MyDataHelps.min.js\" integrity=\"sha384-ykWMzTgZSUh8LTGYIh7OxjfrD3hew6mW9a1nTtSE1l8znV7va1yFqolnl3lOsrCF\" crossorigin=\"anonymous\"></script>\n</head>\n <style>\n h1{color:#EC6D18;font-size:24px;line-height:1.2}\n </style>\n <style type=\"text/css\">\n html\n {\n font-size: 17px;\n }\n @supports (font: -apple-system-body)\n {\n html\n {\n font: -apple-system-body;\n }\n }\n body\n {\n margin: 0;\n padding: 0;\n font-family: Helvetica, Arial, sans-serif;\n display: block !important; /* preventing flash of unstyled content */\n }\n \n a\n {\n color:#5381c3;\n text-decoration:none;\n }\n h1\n {\n text-align: center;\n font-size: 1.7em;\n margin: 0;\n line-height: 1.2em;\n font-weight: normal;\n margin-bottom: 15px;\n position: relative;\n display: block;\n }\n .step-container\n {\n padding: 10px 20px 10px 20px;\n }\n p\n {\n font-size: 1em;\n line-height: 1.3em;\n text-align: center;\n margin-top: 15px;\n margin-bottom: 15px;\n }\n button\n {\n margin-top: 20px;\n padding: 16px;\n background: #5381c3;\n font-size: 1em;\n color: #FFF;\n font-weight: bold;\n border: solid 1px #5381c3;\n border-radius: 5px;\n cursor: pointer;\n width: 100%;\n box-sizing: border-box;\n }\n </style>\n <style>\n body {\n height: 95%;\n position: relative;\t\t\t\t\n font-family: Helvetica, Arial, sans-serif;\t\t\t\t\n font-size: 1.2em;\n text-align: center;\n }\n\n #message {\t\t\t\n display: none;\n padding-top: 80px;\n }\n\n #spinner {\n border: 5px solid #f3f3f3;\n border-top: 5px solid #366DBC;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n animation: spin 1s linear infinite;\n margin: 0 auto;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n </style>\n<body>\n\t<div class=\"step-container\">\n <div id=\"message-insert\"> <div id=\"spinner\"></div>\t\n </div>\n </div>\n \n <script>\n \n function getAnswer(stepIdentifier, resultIdentifier) {\n if ( !window.taskResult ) return null;\n\n resultIdentifier = resultIdentifier || stepIdentifier;\n\n var stepResult = window.taskResult.StepResults.find(function(stepResult) {\n return stepResult.Identifier === stepIdentifier;\n });\n if ( !stepResult ) return [];\n\n var questionResult = stepResult.QuestionResults.find(function(questionResult) {\n return questionResult.Identifier === resultIdentifier;\n });\n if ( !questionResult ) return [];\n\n var answer = [questionResult.Answer];\n if ( questionResult.Choices )\n {\n answer = questionResult.Choices;\n }\n if ( questionResult.Result )\n {\n answer = [questionResult.Result];\n }\n\n return answer;\n }\n \n function evalDates(){\n \n var stepOneDate = getAnswer(\"date1\");\n var stepTwoDate = getAnswer(\"date2\");\n \n console.log(stepOneDate, stepTwoDate);\n console.log(stepOneDate < stepTwoDate);\n \n if (stepOneDate > stepTwoDate) {\n var message = \"\";\n message += '<p style=\"text-align:left\"> There is an error with the dates </p>';\n message += '<div class=\"next-button\"><button id=\"next\" onclick=\"submit()\">Adjust Vaccination Dates</button></div>';\n console.log(message);\n\n document.getElementById('message-insert').innerHTML = message;\n\n\n } else {\n \n window.webkit.messageHandlers.ResearchKit.postMessage(\"true\");\n }\n \n return message;\n \n\n \n } \n \n function submit(){\n window.webkit.messageHandlers.ResearchKit.postMessage(\"false\");\n }\n \n \n setTimeout(function(){evalDates();}, 300);\n \n </script>\n</body>\n</html>",
"navigationRule": {
"type": "PredicateStepNavigationRule",
"resultPredicateDestinations": [
{
"type": "ResultPredicateDestination",
"destinationStepIdentifier": "ContinueSurvey",
"resultPredicate": {
"resultIdentifier": "test_validate",
"stepIdentifier": null,
"type": "WebViewResultPredicate",
"expectedString": "true"
}
},
{
"type": "ResultPredicateDestination",
"destinationStepIdentifier": "date1",
"resultPredicate": {
"resultIdentifier": "test_validate",
"stepIdentifier": null,
"type": "WebViewResultPredicate",
"expectedString": "false"
}
}
]
}
},
{
"type": "InstructionStep",
"text": "",
"title": "Next Steps",
"identifier": "ContinueSurvey"
}
],
"styles": {
"progressBarColor": "#5381c3",
"nextButtonBackgroundColor": "#5381c3",
"nextButtonTextColor": "#FFFFFF"
}
}
Please sign in to leave a comment.