+ }} />
+
+
+
+
+
+
+
+
+ {Array.isArray(x.options) && x.options.length > 0 && (x.type === "likert" || x.type === "rating" || x.type === "list" || x.type === "boolean" || x.type === "multiselect") && (
+
+ {null}
+ {(x.options || []).map((x) => (
+
+ {(x.description || "").length > 0 && {
+ return {props?.children};
+ }, sup: (props) => {
+ return {props.children};
+ }
+ }} />}
+
+ ))}
+ )}
+
+ {Array.isArray(x.options) && x.options.length > 0 && (x.type === "likert" || x.type === "rating" || x.type === "list" || x.type === "boolean" || x.type === "multiselect") && (
+
+ {null}
+ {(x.options || []).map((x) => (
+
+ 0 && (x.value || "").length > 0 ? `(${t(x.value?.toString())})` : `${t(x.value?.toString())}`} skipHtml={false} plugins={[gfm, emoji]} renderers={{
+ link: LinkRenderer, sub: (props) => {
+ return {props?.children};
+ }, sup: (props) => {
+ return {props.children};
+ }
+ }} />
+
+ ))}
+ )}
+
+ {(x.questions || []).map((question, qindex) => (
+
+
+ *` : `${t(question.text)}`} allowDangerousHtml={true} plugins={[gfm, emoji]} renderers={{
+ link: LinkRenderer, span: (props) => {
+ return {props?.children};
+ }, sup: (props) => {
+ return {props.children};
+ }
+ }} />
+
+ {(Array.isArray(x.options) && (x.options || []).length > 0) ? (
+ x.type === "list" || x.type === "boolean" || x.type === "likert" ? (
+ (x.options || []).map((op, k) => (
+
+ }
+ icon={}
+ onClick={() => {
+ setSelectedValue({ ...selectedValue, [idx + qindex]: { item: question.text, value: csvStringify([op.value]) } })
+ const response = { item: question.text, value: csvStringify([op.value]) }
+ const data = updateResponses(x, response, activityId, responses, idx + qindex, startTime, setActiveStep, total)
+ onResponse(data)
+ }}
+ />
+ }
+ label={null}
+ />
+
+ ))
+ ) : x.type === "multiselect" ? ((x.options || []).map((op, j) => (
+
+ {
+ let values = csvParse(selectedValue[idx + qindex]?.value || [])
+
+ if (!csvParse(selectedValue[idx + qindex]?.value || []).includes(op.value)) {
+ values.push(op.value)
+ values = (values || []).filter((elem, i, self) => {
+ return i === self.indexOf(elem);
+ })
+ } else {
+ const key = values.indexOf(op.value);
+ if (key !== -1) {
+ values.splice(key, 1);
+ }
+ }
+ setSelectedValue({ ...selectedValue, [idx + qindex]: { item: question.text, value: csvStringify(values) } })
+ const response = { item: question.text, value: csvStringify(values) }
+ const data = updateResponses(x, response, activityId, responses, idx + qindex, startTime, setActiveStep, total)
+ onResponse(data)
+ }}
+ />
+ }
+ label={null}
+ />
+
+ ))
+ )
+ : x.type === "slider" ? (
+
+ {
+ setSelectedValue({ ...selectedValue, [idx + qindex]: { item: question.text, value: csvStringify([val]) } })
+ const response = { item: question.text, value: val !== null ? csvStringify([val]) : null }
+ const data = updateResponses(x, response, activityId, responses, idx + qindex, startTime, setActiveStep, total)
+ onResponse(data)
+ }} value={csvParse(selectedValue[idx + qindex]?.value || [])[0] ?? null} />
+
+ ) : x.type === "rating" ?
+ ((x.options || []).map((op, j) => (
+
+ {
+ setSelectedValue({ ...selectedValue, [idx + qindex]: { item: question.text, value: csvStringify([val]) } })
+ const response = { item: question.text, value: val !== null ? csvStringify([val]) : null }
+ const data = updateResponses(x, response, activityId, responses, idx + qindex, startTime, setActiveStep, total)
+ onResponse(data)
+ }}
+ value={op.value}
+ />
+
+
+ ))) : x.type === "time" ? (
+
+ {
+ const response = { item: question.text, value: val }
+ const data = updateResponses(x, response, activityId, responses, idx + qindex, startTime, setActiveStep, total)
+ onResponse(data)
+ }} options={x.options} value={!!responses?.current[idx + qindex]?.value ? responses?.current[idx + qindex]?.value : undefined} />
+ ) : null) :
+ (
+
+ {
+
+ x?.type === "short" ?
+ (
+ {
+ const response = { item: question.text, value: val }
+ const data = updateResponses(x, response, activityId, responses, idx + qindex, startTime, setActiveStep, total)
+ onResponse(data)
+ }} value={!!responses?.current[idx + qindex]?.value ? responses?.current[idx + qindex]?.value : undefined} />
+ )
+ : x.type === "text" ? (
+ {
+ const response = { item: question.text, value: val }
+ const data = updateResponses(x, response, activityId, responses, idx + qindex, startTime, setActiveStep, total)
+ onResponse(data)
+ }} charLimit={CHARACTER_LIMIT} value={!!responses?.current[idx + qindex]?.value ? responses?.current[idx + qindex]?.value : undefined} />
+ ) :
+ x.type === "time" ? (
+
+ {
+ const response = { item: question.text, value: val }
+ const data = updateResponses(x, response, activityId, responses, idx + qindex, startTime, setActiveStep, total)
+ onResponse(data)
+ }} options={x.options} value={!!responses?.current[idx + qindex]?.value ? responses?.current[idx + qindex]?.value : undefined} />
+ ) :
+ null
+ }
+
+ )
+ }
+
+
+ ))}
+
+
+
+
{supportsSidebar && index === settingsQuestions - 1 && (
{t("Submit")}
)}
-
-
-
+
+
)
}
@@ -1188,7 +1233,7 @@ function MultiSelectResponse({ onChange, options, value, ...props }) {
root: classes.fieldGroup,
}}
>
- {options.map((x) => (
+ {options.map((x) => (
- {
- return {props?.children};
- }, sup: (props) => {
- return {props.children};
- }}} />
+ {
+ return {props?.children};
+ }, sup: (props) => {
+ return {props.children};
+ }
+ }} />
- {
- return {props?.children};
- }, sup: (props) => {
- return {props.children};
- }}} />
+ {
+ return {props?.children};
+ }, sup: (props) => {
+ return {props.children};
+ }
+ }} />
}
@@ -1301,33 +1350,35 @@ function Question({ onResponse, text, desc, required, type, options, value, star
- {
- return {props?.children};
- }, sup: (props) => {
- return {props.children};
- }}} />
+ {
+ return {props?.children};
+ }, sup: (props) => {
+ return {props.children};
+ }
+ }} />
{!!required && *}
-
+
0
- ? options[0].description
- : options[0].value
- },
- ${options[options.length - 1].value} being ${
- !!options[options.length - 1].description && options[options.length - 1].description.trim().length > 0
- ? options[options.length - 1].description
- : options[options.length - 1].value
- }`
- )
- : !!desc && t(`${desc}`) } skipHtml={false} plugins={[gfm, emoji]} renderers={{ link: LinkRenderer, sub: (props) => {
- return {props?.children};
- }, sup: (props) => {
- return {props.children};
- }}} />
+ `${options[0].value} being ${!!options[0].description && options[0].description.trim().length > 0
+ ? options[0].description
+ : options[0].value
+ },
+ ${options[options.length - 1].value} being ${!!options[options.length - 1].description && options[options.length - 1].description.trim().length > 0
+ ? options[options.length - 1].description
+ : options[options.length - 1].value
+ }`
+ )
+ : !!desc && t(`${desc}`)} skipHtml={false} plugins={[gfm, emoji]} renderers={{
+ link: LinkRenderer, sub: (props) => {
+ return {props?.children};
+ }, sup: (props) => {
+ return {props.children};
+ }
+ }} />
{component}
@@ -1357,7 +1408,7 @@ function Questions({
- {`${t("Question")}`} {(index + 1)} {`${t("of")}`} {settings.length}
+ {`${t("Question")}`} {(index + 1)} {`${t("of")}`} {settings.length}
@@ -1371,7 +1422,7 @@ function Questions({
options={Array.isArray(x.options) ? x.options?.map((y) => ({ ...y, label: y.value })) : x.options}
value={responses.current[idx] ?? null}
onResponse={(response) => {
- const data = updateResponses(x, response, activityId,responses, idx, startTime, setActiveStep, totalQuestions)
+ const data = updateResponses(x, response, activityId, responses, idx, startTime, setActiveStep, totalQuestions)
onResponse(data)
}}
startTime={new Date().getTime()}
@@ -1390,27 +1441,27 @@ function Questions({
}
const updateResponses = (x, response, activityId, responses, idx, startTime, setActiveStep, total) => {
- responses.current[idx] = response
- if (x.type !== "multiselect") {
- setActiveStep((prev) => prev + 1)
- }
- response.duration = new Date().getTime() - startTime
+ responses.current[idx] = response
+ if (x.type !== "multiselect") {
+ setActiveStep((prev) => prev + 1)
+ }
+ response.duration = new Date().getTime() - startTime
- response.endTime = new Date().getTime()
- response.type = null
- response.level = null
-
- localStorage.setItem("activity-survey-"+ activityId, JSON.stringify(Array.from({
+ response.endTime = new Date().getTime()
+ response.type = null
+ response.level = null
+
+ localStorage.setItem("activity-survey-" + activityId, JSON.stringify(Array.from({
+ ...responses.current,
+ length: total,
+ })))
+ return (
+ Array.from({
...responses.current,
length: total,
- })))
- return (
- Array.from({
- ...responses.current,
- length: total,
- })
- )
- }
+ })
+ )
+}
function Section({
onResponse,
@@ -1423,9 +1474,9 @@ function Section({
...props
}) {
const activityId = value?.id
- const base = value.settings.map((x, index) => (
- !!activityVal && activityVal[index] ?
- activityVal[index] : { item: x.text, value: null, duration: 0 }))
+ const base = value.settings.map((x, index) => (
+ !!activityVal && activityVal[index] ?
+ activityVal[index] : { item: x.text, value: null, duration: 0 }))
const responses = useRef(base)
const [activeStep, setActiveStep] = useState(0)
const classes = useStyles()
@@ -1440,46 +1491,46 @@ function Section({
const calcIndex = (idx) => {
let index = 0
- ;(settings || []).map((x, i) => {
- if(i < idx) {
- if(!!x.questions && x.questions.length > 0) {
- index = index + x.questions.length
- } else {
- index++
+ ; (settings || []).map((x, i) => {
+ if (i < idx) {
+ if (!!x.questions && x.questions.length > 0) {
+ index = index + x.questions.length
+ } else {
+ index++
+ }
}
- }
- })
+ })
return index
}
// Force creation of result data whether survey was interacted with or not.
useEffect(() => {
- if (slideElements === null) {
- let index = 0
+ if (slideElements === null) {
+ let index = 0
const slideElements = (settings || []).map((x, idx) => {
setElementIn(true)
index = calcIndex(idx)
return (
- {!!x.questions && x.questions.length > 0 ?
- 0 ?
+ :
+ /> :
- }
+ }
- )
+ )
})
setSlideElements(slideElements)
}
@@ -1522,43 +1573,43 @@ function Section({
const handleNext = () => {
const actualIndex = calcIndex(index)
- if(settings[index].subType === "matrix") {
+ if (settings[index].subType === "matrix") {
let i = 0;
let status = true
- for (const element of settings[index].questions){
- if(!(!element.required || (element.required && (responses?.current[actualIndex+i]?.value !== null && typeof responses?.current[actualIndex+i]?.value !== "undefined" &&
- (typeof responses?.current[actualIndex+i]?.value !== "string" || (typeof responses?.current[actualIndex+i]?.value === "string" &&
- responses?.current[actualIndex+i]?.value?.trim().length !== 0)))))) {
+ for (const element of settings[index].questions) {
+ if (!(!element.required || (element.required && (responses?.current[actualIndex + i]?.value !== null && typeof responses?.current[actualIndex + i]?.value !== "undefined" &&
+ (typeof responses?.current[actualIndex + i]?.value !== "string" || (typeof responses?.current[actualIndex + i]?.value === "string" &&
+ responses?.current[actualIndex + i]?.value?.trim().length !== 0)))))) {
enqueueSnackbar(t("Please enter your response."), {
variant: "error",
- })
+ })
status = false
break
}
i++
}
- if(!!status) {
+ if (!!status) {
slideElementChange(1)
}
} else {
- if(!value.settings[actualIndex].required || (value.settings[actualIndex].required && (responses?.current[actualIndex]?.value !== null && typeof responses.current[actualIndex].value !== "undefined" &&
- (typeof responses?.current[actualIndex]?.value !== "string" || (typeof responses?.current[actualIndex]?.value === "string" &&
- responses?.current[actualIndex]?.value?.trim().length !== 0))))) {
- slideElementChange(1)
- } else {
- enqueueSnackbar(t("Please enter your response."), {
- variant: "error",
- })
+ if (!value.settings[actualIndex].required || (value.settings[actualIndex].required && (responses?.current[actualIndex]?.value !== null && typeof responses.current[actualIndex].value !== "undefined" &&
+ (typeof responses?.current[actualIndex]?.value !== "string" || (typeof responses?.current[actualIndex]?.value === "string" &&
+ responses?.current[actualIndex]?.value?.trim().length !== 0))))) {
+ slideElementChange(1)
+ } else {
+ enqueueSnackbar(t("Please enter your response."), {
+ variant: "error",
+ })
+ }
}
}
- }
const tabDirection = (currentTab) => {
return supportsSidebar ? "up" : "left"
}
const handleChange = (event) => {
const target = event.target
- // if (target.getAttribute("role") === "dialog") {
+ // if (target.getAttribute("role") === "dialog") {
// const progressVal = (target.scrollTop / (target.scrollHeight - target.clientHeight)) * 100
// setProgressValue(progressVal + 10 > 100 ? progressVal : progressVal + 10)
// }
@@ -1566,17 +1617,19 @@ function Section({
return (
-
+
{!noBack && onResponse(null)}>
arrow_back
}
- {
- return {props?.children};
- }, sup: (props) => {
- return {props.children};
- }}} />
+ {
+ return {props?.children};
+ }, sup: (props) => {
+ return {props.children};
+ }
+ }} />
@@ -1584,37 +1637,37 @@ function Section({
{supportsSidebar ? (
settings.map((x, idx) => (
- {!!x.questions && x.questions.length > 0 ?
- 0 ?
+ :
- }
+ /> :
+ }
))
) : (
@@ -1645,7 +1698,7 @@ function Section({
)
}
-export default function SurveyQuestions({...props}) {
+export default function SurveyQuestions({ ...props }) {
const classes = useStyles()
const { t } = useTranslation()
const [responses, setResponses] = useState(null)
@@ -1661,39 +1714,39 @@ export default function SurveyQuestions({...props}) {
let status = true
const questions = activity.settings
let i = 0
- if(response === null) {
+ if (response === null) {
return false
}
for (const question of questions) {
- if(!question.required || (!!question.required && (!!response && !!response[i] && response[i]?.value !== null &&
+ if (!question.required || (!!question.required && (!!response && !!response[i] && response[i]?.value !== null &&
typeof response[i]?.value !== "undefined" && (typeof response[i]?.value !== "string" ||
- (typeof response[i]?.value === "string" && response[i]?.value?.trim().length !== 0))))) {
- status = true
+ (typeof response[i]?.value === "string" && response[i]?.value?.trim().length !== 0))))) {
+ status = true
} else {
status = false
break
}
i++
}
- return status
+ return status
}
const postSubmit = (response) => {
- if(validator(response)) {
+ if (validator(response)) {
response.map((r) => {
delete r.endTime
})
const result = {
temporal_slices: response,
- duration : new Date().getTime() - startTime,
+ duration: new Date().getTime() - startTime,
static_data: {},
timestamp: startTime
}
- onResponse(result)
+ onResponse(result)
} else {
enqueueSnackbar(t("Some responses are missing. Please complete all required questions before submitting."), {
variant: "error",
- })
+ })
}
}
const onResponse = (response) => {
@@ -1704,31 +1757,31 @@ export default function SurveyQuestions({...props}) {
}
const loadData = (statusVal: boolean) => {
- if(!!statusVal) {
- const val = localStorage.getItem("activity-survey-" +(props.data?.activity?.id ?? ""))
+ if (!!statusVal) {
+ const val = localStorage.getItem("activity-survey-" + (props.data?.activity?.id ?? ""))
setActivityVal(JSON.parse(val))
} else {
- localStorage.setItem('activity-survey-'+(props.data?.activity?.id ?? ""), "")
+ localStorage.setItem('activity-survey-' + (props.data?.activity?.id ?? ""), "")
}
const activity = props.data.activity ?? (props.data ?? {});
setActivity(activity);
setConfirm(false)
}
-
+
useEffect(() => {
- if(typeof localStorage.getItem('activity-survey-'+(props.data?.activity?.id ?? "")) !== 'undefined' &&
- (localStorage.getItem('activity-survey-'+(props.data?.activity?.id ?? ""))?.trim()?.length ?? 0) > 0) {
+ if (typeof localStorage.getItem('activity-survey-' + (props.data?.activity?.id ?? "")) !== 'undefined' &&
+ (localStorage.getItem('activity-survey-' + (props.data?.activity?.id ?? ""))?.trim()?.length ?? 0) > 0) {
setConfirm(true)
- } else {
+ } else {
const activity = props.data.activity ?? (props.data ?? {});
setActivity(activity);
}
- const configuration = props.data.configuration;
+ const configuration = props.data.configuration;
i18n.changeLanguage(!!configuration ? configuration?.language : "en-US");
}, [])
useEffect(() => {
- if(!!activity) {
+ if (!!activity) {
setQuestions()
}
}, [activity])
@@ -1737,7 +1790,7 @@ export default function SurveyQuestions({...props}) {
{ description: t("Yes"), value: "Yes" /* true */ },
{ description: t("No"), value: "No" /* false */ },
]
-
+
const likertOpts = [
{ description: t("Nearly All the Time"), value: 3 },
{ description: t("More than Half the Time"), value: 2 },
@@ -1746,57 +1799,57 @@ export default function SurveyQuestions({...props}) {
]
const setQuestions = () => {
- const settings = []
- const processed = []
- ;(activity.settings || []).map((question, index) => {
- if( !processed.includes(index)) {
- if(activity.settings[index+1]?.type === "matrix" || (index === 0 && question?.type === "matrix")) {
+ const settings = []
+ const processed = []
+ ; (activity.settings || []).map((question, index) => {
+ if (!processed.includes(index)) {
+ if (activity.settings[index + 1]?.type === "matrix" || (index === 0 && question?.type === "matrix")) {
const desc = question?.description ?? ""
const options = question?.type === "boolean" ? binaryOpts : question?.type === "likert" ? likertOpts : question?.options ?? []
const questions = []
- for (let k=index; k < activity.settings.length; k++) {
- if(k === index || (activity.settings[k]?.type === "matrix")){
- questions.push({text: activity.settings[k].text, required: activity.settings[k].required})
+ for (let k = index; k < activity.settings.length; k++) {
+ if (k === index || (activity.settings[k]?.type === "matrix")) {
+ questions.push({ text: activity.settings[k].text, required: activity.settings[k].required })
processed.push(k)
} else {
break
}
}
const type = index === 0 && question?.type === "matrix" ? "text" : question.type
- settings.push({type, subType:"matrix", description: desc, options, questions})
+ settings.push({ type, subType: "matrix", description: desc, options, questions })
} else {
settings.push(question)
}
}
})
- setSettings(settings)
+ setSettings(settings)
}
return (
-
-
+ setConfirm(false)}
open={confirm}
- confirmAction={loadData}
- confirmationMsg={t("Would you like to resume this activity where you left off?")}/>
-
+ confirmAction={loadData}
+ confirmationMsg={t("Would you like to resume this activity where you left off?")} />
+
{(activity !== null && settings !== null) ?
+ onResponse={(response) =>
(response === null) ? onResponse(null) :
- setResponses(response)
+ setResponses(response)
}
value={activity}
activityVal={activityVal}
settings={settings}
totalQuestions={(activity?.settings || []).length}
- noBack= {props.data.noBack}
- onComplete={() =>{
+ noBack={props.data.noBack}
+ onComplete={() => {
postSubmit(responses)
}}
- /> : null }
+ /> : null}
)
}
\ No newline at end of file