Proportions Survey

Component that allows a group of people to vote on the weights and importance of given options.

Options

• allowMultipleAnswers | boolean: controls whether one wishes to allow students to answer the survey multiple times. Default: false.
• anonymous | boolean: controls whether student answers are anonymized. Default: false.
• colors | array: array of colors for the pie chart components. If not defined, a pre-defined color scale will be used. Default: none.
• disabled | boolean: controls whether the survey is deactivated. Default: false.
• group | string: group display heading. Default: 'group results'.
• groupHeight | number: proportions input height for group display (in px). Default: 100.
• legends | array: legend labels that describe the options to be weighed. Default: [].
• margin | string: proportion input margin (in px). Default: '40px'.
• onSubmit | function: callback function invoked once students submits an answer. Default: onSubmit() {}.
• personalHeight | number: proportions input height for individual student (in px). Default: 200.
• precision | number: displayed precision of proportion values. Default: 2.
• question | (string|node): the question to be displayed. Default: ''.
• step | number: the step of the arrows seen when hovering the cursor above the input box. Default: 0.25.

Examples

Live Editor

<ProportionsSurvey id="Survey" question="Decide what is important" group="Group decision" nElements={3} colors = {[ "red", "blue", "gold" ]} personalHeight={300} groupHeight={200} margin="80px" legends={[ "bitcoin", "old", "diamonds" ]} />

<ProportionsSurvey 
    id="Survey"
    question="Decide what is important"
    group="Group decision"
    nElements={3}
    colors = {[ "red", "blue", "gold" ]}
    personalHeight={300}
    groupHeight={200}
    margin="80px"
    legends={[ "bitcoin", "old", "diamonds" ]}
/>

Result

ReferenceError: Provider is not defined