import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SurveyHome from './SurveyHome';
import './style.css';
ReactDOM.render(<SurveyHome />, document.getElementById('root'));
{
"name": "@plnkr/starter-react",
"version": "1.0.2",
"description": "React starter template",
"dependencies": {
"react": "^16.13.0",
"react-dom": "^16.13.0",
"survey-react": "1.5.10",
"surveyjs-widgets": "1.5.10",
"jquery": "^3.4.1",
"nouislider": "10.1.0"
},
"plnkr": {
"runtime": "system",
"useHotReload": true
}
}
h1,
p {
font-family: sans-serif;
}
/*! nouislider - 10.1.0 - 2017-07-28 17:11:18 */
/* Functional styling;
* These styles are required for noUiSlider to function.
* You don't need to change these rules to apply your design.
*/
.noUi-target,
.noUi-target * {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-ms-touch-action: none;
touch-action: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-target {
position: relative;
direction: ltr;
}
.noUi-base {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
/* Fix 401 */
}
.noUi-connect {
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.noUi-origin {
position: absolute;
height: 0;
width: 0;
}
.noUi-handle {
position: relative;
z-index: 1;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.noUi-state-drag * {
cursor: inherit !important;
}
/* Painting and performance;
* Browsers can paint handles in their own layer.
*/
.noUi-base,
.noUi-handle {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Slider size and handle placement;
*/
.noUi-horizontal {
height: 18px;
}
.noUi-horizontal .noUi-handle {
width: 34px;
height: 28px;
left: -17px;
top: -6px;
}
.noUi-vertical {
width: 18px;
}
.noUi-vertical .noUi-handle {
width: 28px;
height: 34px;
left: -6px;
top: -17px;
}
/* Styling;
*/
.noUi-target {
background: #fafafa;
border-radius: 4px;
border: 1px solid #d3d3d3;
box-shadow: inset 0 1px 1px #f0f0f0, 0 3px 6px -5px #bbb;
}
.noUi-connect {
background: #3fb8af;
border-radius: 4px;
box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
-webkit-transition: background 450ms;
transition: background 450ms;
}
/* Handles and cursors;
*/
.noUi-draggable {
cursor: ew-resize;
}
.noUi-vertical .noUi-draggable {
cursor: ns-resize;
}
.noUi-handle {
border: 1px solid #d9d9d9;
border-radius: 3px;
background: #fff;
cursor: default;
box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ebebeb, 0 3px 6px -3px #bbb;
}
.noUi-active {
box-shadow: inset 0 0 1px #fff, inset 0 1px 7px #ddd, 0 3px 6px -3px #bbb;
}
/* Handle stripes;
*/
.noUi-handle:before,
.noUi-handle:after {
content: '';
display: block;
position: absolute;
height: 14px;
width: 1px;
background: #e8e7e6;
left: 14px;
top: 6px;
}
.noUi-handle:after {
left: 17px;
}
.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
width: 14px;
height: 1px;
left: 6px;
top: 14px;
}
.noUi-vertical .noUi-handle:after {
top: 17px;
}
/* Disabled state;
*/
[disabled] .noUi-connect {
background: #b8b8b8;
}
[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
cursor: not-allowed;
}
/* Base;
*
*/
.noUi-pips,
.noUi-pips * {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.noUi-pips {
position: absolute;
color: #999;
}
/* Values;
*
*/
.noUi-value {
position: absolute;
white-space: nowrap;
text-align: center;
}
.noUi-value-sub {
color: #ccc;
font-size: 10px;
}
/* Markings;
*
*/
.noUi-marker {
position: absolute;
background: #ccc;
}
.noUi-marker-sub {
background: #aaa;
}
.noUi-marker-large {
background: #aaa;
}
/* Horizontal layout;
*
*/
.noUi-pips-horizontal {
padding: 10px 0;
height: 80px;
top: 100%;
left: 0;
width: 100%;
}
.noUi-value-horizontal {
-webkit-transform: translate3d(-50%, 50%, 0);
transform: translate3d(-50%, 50%, 0);
}
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
.noUi-marker-horizontal.noUi-marker-sub {
height: 10px;
}
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
/* Vertical layout;
*
*/
.noUi-pips-vertical {
padding: 0 10px;
height: 100%;
top: 0;
left: 100%;
}
.noUi-value-vertical {
-webkit-transform: translate3d(0, 50%, 0);
transform: translate3d(0, 50%, 0);
padding-left: 25px;
}
.noUi-marker-vertical.noUi-marker {
width: 5px;
height: 2px;
margin-top: -1px;
}
.noUi-marker-vertical.noUi-marker-sub {
width: 10px;
}
.noUi-marker-vertical.noUi-marker-large {
width: 15px;
}
.noUi-tooltip {
display: block;
position: absolute;
border: 1px solid #d9d9d9;
border-radius: 3px;
background: #fff;
color: #000;
padding: 5px;
text-align: center;
white-space: nowrap;
}
.noUi-horizontal .noUi-tooltip {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
left: 50%;
bottom: 120%;
}
.noUi-vertical .noUi-tooltip {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
top: 50%;
right: 120%;
}
/*!
* surveyjs - Survey JavaScript library v1.5.16
* Copyright (c) 2015-2020 Devsoft Baltic OÜ - http://surveyjs.io/
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
*/
.sv_window {
position: fixed;
bottom: 3px;
right: 10px;
padding: 1px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
line-break: auto;
}
.sv_window_title {
padding: 8px 14px;
margin: 0;
font-size: 14px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
border-radius: 5px 5px 0 0;
}
.sv_window_content {
padding: 8px;
margin: 0;
}
.sv_window_title a,
.sv_window_title a:link,
.sv_window_title a:visited {
text-decoration: none;
font-size: 14px;
font-style: normal;
color: black;
}
.sv_main.sv_frame .sv_container {
max-width: 80%;
margin: auto;
padding: 0 1em;
}
.sv_main.sv_frame .sv_container .sv_header {
padding-top: 5em;
padding-bottom: 1em;
}
.sv_main {
background-color: #f4f4f4;
}
.sv_main hr {
border-bottom: 1px solid #e7e7e7;
}
.sv_main input[type='button'],
.sv_main button {
color: white;
background-color: #1ab394;
}
.sv_main input[type='button']:hover,
.sv_main button:hover {
background-color: #179d82;
}
.sv_main .sv_q_other input,
.sv_main .sv_q_text_root,
.sv_main .sv_q_dropdown_control,
.sv_main
input:not([type='button']):not([type='reset']):not([type='submit']):not([type='image']):not([type='checkbox']):not([type='radio']),
.sv_main select,
.sv_main textarea {
border: 1px solid #e7e7e7;
color: #6d7072;
background-color: white;
}
.sv_main .sv_q_other input:focus,
.sv_main .sv_q_text_root:focus,
.sv_main .sv_q_dropdown_control:focus,
.sv_main
input:not([type='button']):not([type='reset']):not([type='submit']):not([type='image']):not([type='checkbox']):not([type='radio']):focus,
.sv_main select:focus,
.sv_main textarea:focus {
border: 1px solid #1ab394;
}
.sv_main .sv_select_wrapper {
background-color: white;
}
.sv_main .sv_select_wrapper:before {
background-color: #1ab394;
}
.sv_main .sv_header {
color: #6d7072;
}
.sv_main .sv_custom_header {
background-color: #e7e7e7;
}
.sv_main .sv_container {
color: #6d7072;
}
.sv_main .sv_body {
background-color: white;
border-top: 2px solid #1ab394;
}
.sv_main .sv_progress {
background-color: #e7e7e7;
margin-bottom: 2em;
}
.sv_main .sv_progress_bar {
background-color: #1ab394;
}
.sv_main .sv_p_root > .sv_row {
border-bottom: 1px solid #e7e7e7;
}
.sv_main .sv_p_root > .sv_row:nth-child(odd) {
background-color: white;
}
.sv_main .sv_p_root > .sv_row:nth-child(even) {
background-color: #f4f4f4;
}
.sv_main
.sv_q_erbox:not([style*='display: none']):not([style*='display:none']) {
border: 1px solid #ed5565;
background-color: #fcdfe2;
color: #ed5565;
}
.sv_main
.sv_q_erbox:not([style*='display: none']):not([style*='display:none'])
+ input,
.sv_main
.sv_q_erbox:not([style*='display: none']):not([style*='display:none'])
+ textarea,
.sv_main
.sv_q_erbox:not([style*='display: none']):not([style*='display:none'])
+ .sv_select_wrapper
select {
border: 1px solid #ed5565;
}
.sv_main
.sv_q_erbox:not([style*='display: none']):not([style*='display:none'])
+ input:focus,
.sv_main
.sv_q_erbox:not([style*='display: none']):not([style*='display:none'])
+ textarea:focus,
.sv_main
.sv_q_erbox:not([style*='display: none']):not([style*='display:none'])
+ .sv_select_wrapper
select:focus {
outline: #ed5565 auto 5px;
}
.sv_main table.sv_q_matrix tr,
.sv_main table.sv_q_matrix_dropdown tr,
.sv_main table.sv_q_matrix_dynamic tr {
border-bottom: 1px solid #e7e7e7;
}
.sv_main .sv_q_m_cell_selected {
color: white;
background-color: #179d82;
}
.sv_main .sv_q_rating_item.active .sv_q_rating_item_text {
background-color: #179d82;
border-color: #179d82;
color: white;
}
.sv_main .sv_q_rating_item .sv_q_rating_item_text {
border: 1px solid #e7e7e7;
}
.sv_main .sv_q_rating_item .sv_q_rating_item_text:hover {
border: 1px solid #179d82;
}
.sv_main .sv_q_imgsel.checked label > div {
background-color: #1ab394;
}
.sv_main .sv_q_file_remove:hover {
color: #1ab394;
}
.sv_main .sv-boolean__switch {
background-color: #1ab394;
}
.sv_main .sv-boolean__slider {
background-color: white;
}
.sv_main .sv-boolean__label--disabled {
color: rgba(64, 64, 64, 0.5);
}
.sv_main {
position: relative;
width: 100%;
font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif,
'Helvetica Neue', Arial, sans-serif;
font-size: 14px;
}
.sv_main hr {
border: none;
}
.sv_main input[type='button'],
.sv_main button {
font-size: 0.85em;
font-weight: bold;
line-height: 2em;
border: none;
min-width: 100px;
cursor: pointer;
padding: 0 2em;
border-radius: 2px;
}
.sv_main .sv_custom_header {
position: absolute;
width: 100%;
height: 74%;
max-height: 275px;
}
.sv_main .sv_container {
position: relative;
}
.sv_main .sv_container .sv_header {
padding: 1em;
}
.sv_main .sv_container .sv_header h3 {
font-size: 2em;
font-weight: 300;
margin: 0;
}
.sv_main .sv_container .sv_body {
padding: 1em 1em 1.6428em 1em;
}
.sv_main .sv_container .sv_body.sv_completed_page {
text-align: center;
padding: 5em 1em;
}
.sv_main .sv_container .sv_body.sv_completed_page > h3 {
margin: 0;
font-size: 30px;
font-weight: 300;
}
.sv_main .sv_container .sv_body .sv_progress {
height: 0.3em;
}
.sv_main .sv_container .sv_body .sv_progress .sv_progress_bar {
height: 100%;
min-width: 100px;
position: relative;
margin-top: 2em;
}
.sv_main .sv_container .sv_body .sv_progress .sv_progress_bar > span {
position: absolute;
top: -1.5em;
display: inline-block;
white-space: nowrap;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_page_title {
font-size: 1em;
margin-top: 0.1em;
font-weight: normal;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_p_title {
font-weight: bold;
font-size: 1.15em;
margin: 1.5em 0 0 0;
}
.sv_main .sv_container .sv_body .sv_p_root > .sv_row {
padding: 0;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_title {
font-weight: bold;
font-size: 1em;
margin: 0.5em 0;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_description {
margin-top: -0.6em;
min-height: 0.6em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_flow .sv_q_checkbox_inline,
.sv_main .sv_container .sv_body .sv_p_root .sv_q_flow .sv_q_radiogroup_inline,
.sv_main .sv_container .sv_body .sv_p_root .sv_q_flow .sv_q_imagepicker_inline {
line-height: 2em;
display: inline-block;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q {
padding: 0.5em 1em 1.5em 1em;
box-sizing: border-box;
overflow: auto;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_panel_dynamic .sv_q_title {
font-weight: normal;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
.sv_panel_dynamic
.sv-paneldynamic__progress-container {
position: relative;
margin-right: 250px;
margin-left: 40px;
margin-top: 10px;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
.sv_q_erbox:not([style*='display: none']):not([style*='display:none']) {
margin: 1em 0;
padding: 1em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_other input,
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_text_root,
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_dropdown_control,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
input:not([type='button']):not([type='reset']):not([type='submit']):not([type='image']):not([type='checkbox']):not([type='radio']),
.sv_main .sv_container .sv_body .sv_p_root .sv_q select,
.sv_main .sv_container .sv_body .sv_p_root .sv_q textarea {
position: relative;
width: 100%;
box-sizing: border-box;
font-size: 1em;
line-height: 2em;
padding-left: 1em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_other input:focus,
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_text_root:focus,
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_dropdown_control:focus,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
input:not([type='button']):not([type='reset']):not([type='submit']):not([type='image']):not([type='checkbox']):not([type='radio']):focus,
.sv_main .sv_container .sv_body .sv_p_root .sv_q select:focus,
.sv_main .sv_container .sv_body .sv_p_root .sv_q textarea:focus {
outline: none;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_other input,
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_dropdown_control,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
input:not([type='button']):not([type='reset']):not([type='submit']):not([type='image']):not([type='checkbox']):not([type='radio']),
.sv_main .sv_container .sv_body .sv_p_root .sv_q select {
height: calc(2em + 1px);
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q div.sv_q_text_root,
.sv_main .sv_container .sv_body .sv_p_root .sv_q div.sv_q_dropdown_control {
min-height: 2.43em;
min-width: 7em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_select_wrapper {
width: 100%;
position: relative;
display: inline-block;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_select_wrapper select {
display: block;
background: transparent;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 2.5em;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
.sv_select_wrapper
select::-ms-expand {
display: none;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_select_wrapper:before {
padding: 1em;
position: absolute;
right: 1px;
top: 1px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzNCAzNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzQgMzQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxMiwxNiAxNCwxNCAxNywxNyAyMCwxNCAyMiwxNiAxNywyMSAiLz4KPC9zdmc+Cg==);
content: '';
background-repeat: no-repeat;
background-position: center;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q input[type='color'] {
min-height: 2em;
padding: 0;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q input[type='radio'],
.sv_main .sv_container .sv_body .sv_p_root .sv_q input[type='checkbox'] {
margin: 0;
margin-right: 0.55em;
width: 1.2em;
height: 1.2em;
vertical-align: middle;
font-size: 1em;
margin-top: -0.1em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q input[type='radio']:focus,
.sv_main .sv_container .sv_body .sv_p_root .sv_q input[type='checkbox']:focus {
outline: 1px dotted #1ab394;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
.sv_q_radiogroup.sv_q_radiogroup_inline:not(:last-child),
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
.sv_q_checkbox.sv_q_checkbox_inline:not(:last-child),
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
.sv_q_imgsel.sv_q_imagepicker_inline:not(:last-child) {
margin-right: 1.5em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_imgsel label > div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 4px;
border: 1px solid lightgray;
border-radius: 4px;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q
.sv_q_imgsel
label
> div
> img {
display: block;
pointer-events: none;
position: relative;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_radiogroup_clear {
margin-top: 0.5em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_checkbox_inline,
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_radiogroup_inline,
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_imagepicker_inline {
line-height: 2em;
display: inline-block;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q .sv_q_footer {
padding: 1em 0;
}
.sv_main .sv_container .sv_body .sv_p_root table {
width: 100%;
border-collapse: collapse;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
table.sv_q_matrix
.sv_matrix_dynamic_button,
.sv_main
.sv_container
.sv_body
.sv_p_root
table.sv_q_matrix_dropdown
.sv_matrix_dynamic_button,
.sv_main
.sv_container
.sv_body
.sv_p_root
table.sv_q_matrix_dynamic
.sv_matrix_dynamic_button {
padding: 0.3em 2em;
}
@media (min-width: 768px) {
.sv_main .sv_container .sv_body .sv_p_root table.sv_q_matrix td {
min-width: 10em;
}
}
.sv_main .sv_container .sv_body .sv_p_root table.sv_q_matrix td .sv_q_m_label {
position: static;
display: block;
width: 100%;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
table.sv_q_matrix_dropdown
.sv_qcbc
.sv_q_checkbox_control_label {
margin-right: 1.5em;
}
.sv_main .sv_container .sv_body .sv_p_root table td,
.sv_main .sv_container .sv_body .sv_p_root table th {
padding: 0 1em;
}
.sv_main .sv_container .sv_body .sv_p_root table td {
padding: 0.5em;
}
.sv_main .sv_container .sv_body .sv_p_root table th {
line-height: 1.3em;
padding: 0.5em;
vertical-align: bottom;
font-weight: bold;
}
.sv_main .sv_container .sv_body .sv_p_root fieldset.sv_qcbc {
line-height: 2em;
padding-top: 0.1em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_other {
margin-left: 1em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_select_column {
display: inline-block;
vertical-align: top;
min-width: 10%;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_rating {
line-height: 2em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_rating .sv_q_rating_item {
cursor: pointer;
word-spacing: -0.3em;
font-weight: normal;
display: inline;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_rating .sv_q_rating_item > * {
word-spacing: initial;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q_rating
.sv_q_rating_item
> * {
word-spacing: normal;
}
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q_rating
.sv_q_rating_item
.sv_q_rating_item_text {
display: inline-block;
min-width: 2em;
padding: 0 0.3em;
margin-left: -1px;
text-align: center;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_q_rating
.sv_q_rating_item:not(:first-child)
.sv_q_rating_item_text:not(:hover) {
border-left-color: transparent;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_rating .sv_q_rating_min_text {
margin-right: 0.5em;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_q_rating .sv_q_rating_max_text {
margin-left: 0.5em;
}
.sv_main .sv_container .sv_body .sv_nav {
padding: 1em 0;
min-height: 2em;
}
.sv_main .sv_container .sv_body .sv_nav .sv_start_btn,
.sv_main .sv_container .sv_body .sv_nav .sv_next_btn,
.sv_main .sv_container .sv_body .sv_nav .sv_complete_btn {
float: right;
}
.sv_main .sv_container .sv_body .sv_nav .sv_prev_btn {
float: left;
}
[dir='rtl'] .sv_main input,
[style*='direction:rtl'] .sv_main input {
text-align: right;
}
[dir='rtl'] .sv_main th,
[style*='direction:rtl'] .sv_main th {
text-align: right;
}
[dir='rtl'] .sv_main .sv_container .sv_body .sv_nav .sv_start_btn,
[dir='rtl'] .sv_main .sv_container .sv_body .sv_nav .sv_next_btn,
[dir='rtl'] .sv_main .sv_container .sv_body .sv_nav .sv_complete_btn,
[style*='direction:rtl'] .sv_main .sv_container .sv_body .sv_nav .sv_start_btn,
[style*='direction:rtl'] .sv_main .sv_container .sv_body .sv_nav .sv_next_btn,
[style*='direction:rtl']
.sv_main
.sv_container
.sv_body
.sv_nav
.sv_complete_btn {
float: left;
}
[dir='rtl'] .sv_main .sv_container .sv_body .sv_nav .sv_prev_btn,
[style*='direction:rtl'] .sv_main .sv_container .sv_body .sv_nav .sv_prev_btn {
float: right;
}
@media (max-width: 600px) {
.sv_main .sv_container .sv_body .sv_p_root .sv_row .sv_q,
.sv_main .sv_container .sv_body .sv_p_root .sv_row .sv_qstn {
display: block;
width: 100% !important;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_row .sv_q .title-left,
.sv_main .sv_container .sv_body .sv_p_root .sv_row .sv_qstn .title-left {
float: none;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
.sv_q_radiogroup_inline,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
.sv_q_checkbox_inline,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
.sv_q_imagepicker_inline,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
.sv_q_radiogroup_inline,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
.sv_q_checkbox_inline,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
.sv_q_imagepicker_inline {
display: block;
}
.sv_main .sv_container .sv_body .sv_p_root .sv_row .sv_q table.sv_q_matrix,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dropdown,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dynamic,
.sv_main .sv_container .sv_body .sv_p_root .sv_row .sv_qstn table.sv_q_matrix,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dropdown,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dynamic {
display: block;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix
thead,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dropdown
thead,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dynamic
thead,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix
thead,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dropdown
thead,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dynamic
thead {
display: none;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix
tbody,
.sv_main .sv_container .sv_body .sv_p_root .sv_row .sv_q table.sv_q_matrix tr,
.sv_main .sv_container .sv_body .sv_p_root .sv_row .sv_q table.sv_q_matrix td,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dropdown
tbody,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dropdown
tr,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dropdown
td,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dynamic
tbody,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dynamic
tr,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dynamic
td,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix
tbody,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix
tr,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix
td,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dropdown
tbody,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dropdown
tr,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dropdown
td,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dynamic
tbody,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dynamic
tr,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dynamic
td {
display: block;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dropdown
td:before,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix_dynamic
td:before,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dropdown
td:before,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix_dynamic
td:before {
content: attr(headers);
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix
td
label.sv_q_m_label,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix
td
label.sv_q_m_label {
display: inline;
}
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_q
table.sv_q_matrix
td:after,
.sv_main
.sv_container
.sv_body
.sv_p_root
.sv_row
.sv_qstn
table.sv_q_matrix
td:after {
content: attr(headers);
}
}
.App {
display: flex;
position: relative;
flex-direction: column;
}
.left-nav {
height: 50px;
width: 50px;
position: fixed;
top: 0;
}
.content {
display: flex;
height: 100%;
margin-left: 120px;
}
import noUiSlider from "nouislider";
function getHandlers(answer, rangeName, min, max) {
if (answer && Object.prototype.toString.call(rangeName) === "[object Array]" && Object.prototype.toString.call(answer) !== "[object Array]") {
return rangeName.reduce((acc, cur, index) => {
const next = acc[index] + answer[cur];
acc.push(next);
return acc;
}, [min]);
}
else {
return answer;
}
}
function formatAnswer(handlers, rangeName) {
if (Object.prototype.toString.call(rangeName) === "[object Array]" && rangeName.length < handlers.length) {
return rangeName.reduce((acc, cur, index) => {
acc[cur] = handlers[index+1] - handlers[index];
return acc;
}, {});
}
else {
return handlers;
}
}
function parseNumberArray(input) {
if (Object.prototype.toString.call(input) !== "[object Array]")
return null;
return input.map(function(item) {
var value = item;
if(item.value !== undefined) {
value = item.value;
}
return parseInt(value);
})
}
function getNoUiSlider(element) {
if (!element)
return null;
const $ = window["$"];
var target = $(element).children(".noUi-target");
// console.log("target", target)
// console.log("el", element)
if (target.length) {
return target[0].noUiSlider;
}
return null;
}
export default function init(Survey) {
var widget = {
name: "customnouislider",
title: "MyCustomNoUiSlider",
iconName: "icon-nouislider-abc",
widgetIsLoaded: function() {
return typeof noUiSlider != "undefined";
},
isFit: function(question) {
return question.getType() === "customnouislider";
},
htmlTemplate: "<div><div></div></div>",
activatedByChanged: function(activatedBy) {
Survey.JsonObject.metaData.addClass("customnouislider", [], null, "empty");
Survey.JsonObject.metaData.addProperties("customnouislider", [
{
name: "rangeName:stringvalues",
default: null
},
{
name: "start:itemvalues",
default: [0, 30, 70, 100]
},
{
name: "step:number",
default: 1
},
{
name: "rangeMin:number",
default: 0
},
{
name: "rangeMax:number",
default: 100
},
{
name: "pipsMode",
default: "positions"
},
{
name: "pipsValues:itemvalues",
default: [0, 25, 50, 75, 100]
},
{
name: "pipsText:itemvalues",
default: [0, 25, 50, 75, 100]
},
{
name: "pipsDensity:number",
default: 5
},
{
name: "orientation:string",
default: "horizontal"
},
{
name: "direction:string",
default: "ltr"
}
]);
},
afterRender: function(question, el) {
el.style.paddingBottom = "19px";
el.style.paddingRight = "30px";
el.style.paddingTop = "60px";
el.style.paddingLeft = "18px";
el.style.maxWidth = "98%";
el = el.children[0];
el.style.marginBottom = "60px";
if(question.orientation === "vertical") {
el.style.height = "250px";
}
let slider = getNoUiSlider(el);
if (!slider) {
slider = noUiSlider.create(el, {
start: parseNumberArray(question.start),
connect: true,
step: question.step,
tooltips: true,
pips: {
mode: question.pipsMode || "positions",
values: parseNumberArray(question.pipsValues),
density: question.pipsDensity || 5,
format: {
to: function(pVal) {
var pipText = pVal;
question.pipsText.forEach(function(el) {
if(el.text !== undefined && pVal === el.value) {
pipText = el.text;
}
})
return pipText;
}
}
},
range: {
min: question.rangeMin,
max: question.rangeMax
},
orientation: question.orientation,
direction: question.direction
});
}
slider.on("change", function() {
question.value = formatAnswer(slider.get(), question.rangeName);
});
var updateValueHandler = function() {
const handlers = getHandlers(question.value, question.rangeName, question.rangeMin, question.rangeMax);
slider.set(handlers);
};
if (question.isReadOnly) {
el.setAttribute("disabled", true);
}
updateValueHandler();
question.noUiSlider = slider;
question.valueChangedCallback = updateValueHandler;
question.readOnlyChangedCallback = function() {
if (question.isReadOnly) {
el.setAttribute("disabled", true);
} else {
el.removeAttribute("disabled");
}
};
// disable first and last handler (0% and 100%)
var handlers = el.getElementsByClassName('noUi-origin');
if (handlers && handlers.length > 2) {
handlers[0].setAttribute('disabled', true);
handlers[handlers.length-1].setAttribute('disabled', true);
}
},
willUnmount: function(question, el) {
if (!!question.noUiSlider) {
question.noUiSlider.destroy();
question.noUiSlider = null;
}
const arr = window["$"](el).children(".noUi-target");
if (arr.length && arr[0].noUiSlider){
arr[0].noUiSlider.destroy();
}
question.readOnlyChangedCallback = null;
},
pdfRender: function(_, options) {
if (options.question.getType() === "customnouislider") {
var point = options.module.SurveyHelper.createPoint(
options.module.SurveyHelper.mergeRects.apply(null, options.bricks)
);
point.xLeft += options.controller.unitWidth;
point.yTop +=
options.controller.unitHeight *
options.module.FlatQuestion.CONTENT_GAP_VERT_SCALE;
var rect = options.module.SurveyHelper.createTextFieldRect(
point,
options.controller
);
var textboxBrick = new options.module.TextFieldBrick(
options.question,
options.controller,
rect,
true,
options.question.id,
options.question.value || options.question.defaultValue,
"",
options.question.isReadOnly,
false,
"text"
);
options.bricks.push(textboxBrick);
}
}
};
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
}
import React, { useEffect, useState, useLayoutEffect, useRef } from 'react';
import Survey from 'survey-react';
import widgets from 'surveyjs-widgets';
import $ from 'jquery';
import SurveySlider from './CustomWidget';
import ErrorBoundary from "./ErrorBoundary";
import questionnaire from './questionnaire.js';
SurveySlider(Survey);
window['$'] = window['jQuery'] = $;
function findPos(obj) {
var curtop = 0;
if (obj.offsetParent) {
do {
curtop += obj.offsetTop;
} while (obj === obj.offsetParent);
return [curtop];
}
}
function SurveyHome(props) {
const [navigationOption, setNavigationOption] = useState(null);
const [loading, setLoading] = useState(false);
const page = useRef(0);
useLayoutEffect(() => {
function scrollToPanel(index) {
const allPanels = document.querySelectorAll('.sv_p_container');
const destPanel = allPanels[index];
if (!destPanel) return;
const position = findPos(destPanel);
window.scroll(0, position);
}
if (!navigationOption) return;
if (navigationOption.pageIndex === page.current) {
return scrollToPanel(navigationOption.panelIndex);
}
// only remove survey from DOM if page's changed
// workaround because survey doesn't re-render!!!
page.current = navigationOption.pageIndex;
setLoading(true);
setTimeout(() => {
setLoading(false);
scrollToPanel(navigationOption.panelIndex);
}, 50);
}, [navigationOption]);
function saveAnswer(result) {
console.log('value changed', result);
}
function onBtnClick(pageIndex, panelIndex){
setNavigationOption({pageIndex, panelIndex})
}
if (!Survey || !questionnaire) return 'WeDoNotHaveData';
if (loading) return null;
var model = new Survey.Model(questionnaire);
model.currentPageNo = page.current;
model.showTitle = false;
model.onCurrentPageChanged.add(function(surveyModel, pages) {
var newIndex = pages.newCurrentPage.visibleIndex;
setNavigationOption({ pageIndex: newIndex, panelIndex: 0 });
});
return (
<ErrorBoundary>
<div className="App">
<div className="left-nav">
<button onClick={() => onBtnClick(0,0)}>Organization</button>
<button onClick={() => onBtnClick(0,1)}>Collaboration</button>
</div>
<div className="content">
<Survey.Survey
model={model}
onComplete={saveAnswer}
onValueChanged={saveAnswer}
/>
</div>
</div>
</ErrorBoundary>
);
}
export default SurveyHome;
const questionnaire =
{
"title": {
"default": "Test questions",
"nl": "Test vragen"
},
"pages": [
{
"name": "page_teamsassessment",
"title": "Assessment",
"elements": [
{
"type": "panel",
"name": "panel_organization",
"elements": [
{
"type": "text",
"name": "question_customername",
"title": "Customer Name"
},
{
"type": "radiogroup",
"name": "question_organizationstructure",
"title": "How is your organization structure organized",
"choices": [
{
"value": "Line or flat organization",
"text": "Line or flat organization"
},
{
"value": "Matrix organization",
"text": "Matrix organization"
},
{
"value": "Network organization",
"text": "Network organization"
}
]
},
{
"type": "customnouislider",
"name": "question_digitalskilllevel",
"title": "How would you rate the digital skill level of our employees across these 3 skill levels.",
"description": "Enter a total of 100% (Low, Medium and High skill level)",
"rangeName": ["% Low skill level", "% Medium skill level", "% High skill level"],
"connect": true
},
{
"type": "radiogroup",
"name": "question_scrum",
"title": "Is your organization using or planning to use Scrum Agile as methodology?",
"choices": [
{
"value": "Using it already",
"text": "Using it already"
},
{
"value": "Planned to use it",
"text": "Planned to use it"
},
{
"value": "No",
"text": "No"
}
]
},
{
"type": "boolean",
"name": "question_developsoftware",
"title": "Does your organization develop software products?",
"labelTrue": "Yes",
"labelFalse": "No"
}
],
"title": "Organization"
},
{
"type": "panel",
"name": "panel_collaboration",
"elements": [
{
"type": "checkbox",
"name": "question_supportedcollaborationtools",
"title": {
"default": "Which collaboration tools are official supported to use in your organization?",
"nl": "Welke samenwerk tools"
},
"hasOther": true,
"choices": [
{
"value": "File shares",
"text": "File shares"
},
{
"value": "Onedrive for business",
"text": "Onedrive for business"
},
{
"value": "SharePoint on-premise",
"text": "SharePoint on-premise"
},
{
"value": "SharePoint Online",
"text": "SharePoint Online"
},
{
"value": "MS Teams",
"text": "MS Teams"
},
{
"value": "Kaizala",
"text": "Kaizala"
},
{
"value": "Slack",
"text": "Slack"
},
{
"value": "Workplace by Facebook",
"text": "Workplace by Facebook"
},
{
"value": "Basecamp",
"text": "Basecamp"
},
{
"value": "Confluence",
"text": "Confluence"
},
{
"value": "Jira",
"text": "Jira"
},
{
"value": "G Suite",
"text": "G Suite"
},
{
"value": "Lotus Notes",
"text": "Lotus Notes"
},
{
"value": "Novell Groupwise",
"text": "Novell Groupwise"
}
]
},
{
"type": "checkbox",
"name": "question_shadowit",
"title": {
"default": "What collaboration and communication tools do you think are used in your organization (Shadow IT)?",
"nl": "Welke samenwerk tools"
},
"hasOther": true,
"choices": [
{
"value": "Kaizala",
"text": "Kaizala"
},
{
"value": "Slack",
"text": "Slack"
},
{
"value": "Workplace by Facebook",
"text": "Workplace by Facebook"
},
{
"value": "Skype",
"text": "Skype"
},
{
"value": "Yammer",
"text": "Yammer"
},
{
"value": "DingTalk",
"text": "DingTalk"
},
{
"value": "Google Hangouts",
"text": "Google Hangouts"
},
{
"value": "Whatsapp",
"text": "Whatsapp"
}
],
"hasNone": true
},
{
"type": "checkbox",
"name": "question_selfserviceworkspaces",
"title": "Do you offer self-service provided to the end-user to create workspace (site) and invite members?",
"choices": [
{
"value": "Self-service workspaces",
"text": "Self-service workspaces"
},
{
"value": "Self-service invite",
"text": "Self-service invite"
},
{
"value": "Automated setup of workspaces (sites)",
"text": "Automated setup of workspaces (sites)"
}
]
},
{
"type": "boolean",
"name": "question_inviteexternal",
"title": "Is inviting external members to collaborate supported for your organizations?",
"labelTrue": "Yes",
"labelFalse": "No"
},
{
"type": "radiogroup",
"name": "question_externalsharingaccess",
"title": "If external sharing is allowed, are there procedures in place to control external invited users and their access?",
"choices": [
{
"value": "No",
"text": "No"
},
{
"value": "Yes, by procedures and manual checks",
"text": "Yes, by procedures and manual checks"
},
{
"value": "Yes, by software tools",
"text": "Yes, by software tools"
}
]
}
],
"title": "Collaboration"
},
{
"type": "panel",
"name": "panel_communication",
"elements": [
{
"type": "checkbox",
"name": "question_chatplatform",
"title": "Besides e-mail, are you using an internal chat or feeds platform?",
"hasOther": true,
"choices": [
{
"value": "Yammer",
"text": "Yammer"
},
{
"value": "SharePoint Feeds",
"text": "SharePoint Feeds"
},
{
"value": "Skype for Business",
"text": "Skype for Business"
},
{
"value": "WhatsApp",
"text": "WhatsApp"
},
{
"value": "Slack",
"text": "Slack"
},
{
"value": "CampFire",
"text": "CampFire"
},
{
"value": "Google Hangouts",
"text": "Google Hangouts"
},
{
"value": "Facebook Workplace",
"text": "Facebook Workplace"
}
],
"hasNone": true
},
{
"type": "boolean",
"name": "question_chatusage",
"title": "Compared to e-mail, is this chat platform well used in your organization?",
"labelTrue": "Yes",
"labelFalse": "No"
},
{
"type": "checkbox",
"name": "question_videoconferencingplatform",
"title": "Are you using a video conferencing platform?",
"hasOther": true,
"choices": [
{
"value": "Teams",
"text": "Teams"
},
{
"value": "Skype",
"text": "Skype"
},
{
"value": "Skype for business",
"text": "Skype for business"
},
{
"value": "Cisco WebEx",
"text": "Cisco WebEx"
},
{
"value": "GoToMeeting",
"text": "GoToMeeting"
},
{
"value": "Google Hangouts",
"text": "Google Hangouts"
},
{
"value": "ClickMeeting",
"text": "ClickMeeting"
},
{
"value": "AnyMeeting",
"text": "AnyMeeting"
},
{
"value": "LogiTech Meetup",
"text": "LogiTech Meetup"
},
{
"value": "BlueJeans Meeting",
"text": "BlueJeans Meeting"
}
],
"hasNone": true
},
{
"type": "boolean",
"name": "question_videoconferencingwellused",
"visibleIf": "{question_videoconferencingplatform} ['none']",
"title": "Is this video conferencing platform well used in your organization?",
"labelTrue": "Yes",
"labelFalse": "No"
},
{
"type": "boolean",
"name": "question_telephonesystem",
"visibleIf": "{question_videoconferencingplatform} notempty or {question_videoconferencingplatform} ['none']",
"title": "Are you using this conferencing platform also for telephone services?",
"labelTrue": "Yes",
"labelFalse": "No"
},
{
"type": "checkbox",
"name": "question_telephoneserviceusage",
"visibleIf": "{question_telephonesystem} = true",
"title": "Is the telephone service used for:",
"choices": [
{
"value": "internal calls",
"text": "internal calls"
},
{
"value": "external calls",
"text": "external calls"
},
{
"value": "connected to the PBAX system",
"text": "connected to the PBAX system"
}
]
},
{
"type": "rating",
"name": "question_ratingvideoplatform",
"title": "how would you rate the overall satisfaction of the end users of the Video platform? ",
"rateMax": 10
}
],
"title": "Communication"
},
{
"type": "panel",
"name": "panel_sharepoint",
"elements": [
{
"type": "boolean",
"name": "question_sharepointcustomized",
"title": "Is the current SharePoint environment highly customized",
"labelTrue": "Yes",
"labelFalse": "No"
},
{
"type": "boolean",
"name": "question_sharepointcustomizedblocker",
"visibleIf": "{question_sharepointcustomized} == true",
"title": "Will this stop block the organization to migrate to a new collaboration environment?",
"labelTrue": "Yes",
"labelFalse": "No"
}
],
"title": "SharePoint customized environment"
},
{
"type": "panel",
"name": "panel_userexperienc",
"elements": [
{
"type": "rating",
"name": "question_satisfiedcollaborationusers",
"title": "Are end-users satisfied to use the current collaboration environment? ",
"rateMax": 10
},
{
"type": "checkbox",
"name": "question_expectationscollaboration",
"title": "What functions do end-users expect in a collaboration and communication solution?",
"choices": [
{
"value": "Chat",
"text": "Chat"
},
{
"value": "File Sharing",
"text": "File Sharing"
},
{
"value": "Tasks",
"text": "Tasks"
},
{
"value": "Conferencing",
"text": "Conferencing"
},
{
"value": "Project management",
"text": "Project management"
},
{
"value": "Wiki",
"text": "Wiki"
}
]
},
{
"type": "checkbox",
"name": "question_userexperience",
"title": "Which user experience aspects values your end uses most in a collaboration and communication solution?",
"choices": [
{
"value": "Easy to use",
"text": "Easy to use"
},
{
"value": "One integrated application",
"text": "One integrated application"
},
{
"value": "Desktop and mobile usages",
"text": "Desktop and mobile usages"
},
{
"value": "A set of selected best rated applications",
"text": "A set of selected best rated applications"
},
{
"value": "Well integrated to other applications",
"text": "Well integrated to other applications"
}
]
},
{
"type": "checkbox",
"name": "question_changemanagement",
"title": "What user adoption and change management (ACM) methodologies are used in your organization?",
"choices": [
{
"value": "Own developed",
"text": "Own developed"
},
{
"value": "Fasttrack",
"text": "Fasttrack"
},
{
"value": "ProSci",
"text": "ProSci"
},
{
"value": "MS Service Adoption Specialist",
"text": "MS Service Adoption Specialist"
},
{
"value": "MS365 Learning Pathways",
"text": "MS365 Learning Pathways"
}
],
"hasNone": true
}
],
"title": "User Experience"
}
],
"description": "Please fill out the following questions:"
}
]
}
;
export default questionnaire;
import React, { Component } from "react";
export default class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = {hasError: false};
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
console.error(error, errorInfo);
}
render() {
if (this.state.hasError) {
// You can render any custom fallback UI
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}