Tesserae - Questionnaire

Questionnaire

Description

An inline question with choice buttons that locks once answered

Questionnaire shows a question and a list of choice buttons. Once the user picks an answer, the component switches to a "response selected" mode that shows the question with the chosen answer highlighted and disables further input. Use it inline in a transcript, a form or a wizard, where a full ChoiceGroup would be too much and the answer is not meant to be changed afterwards.

SetAnswer puts the component into the answered state without invoking OnAnswered, which is how an already-known answer (one fetched from the server, say) is reflected on load. ClearAnswer re-enables the buttons. AddOption / AddOptions extend the choices after construction.

Samples

Asking and answering

questionnaire-basic-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Questionnaire("Was this answer helpful?", "Yes", "Partly", "No")
               .OnAnswered(q => Toast().Success("You answered: " + q.Answer));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

Reflecting a known answer

questionnaire-answered-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Questionnaire("How would you rate the search results?", "Good", "Mixed", "Poor")
               .SetAnswer("Good");

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

API reference

class

Questionnaire

public sealed class Questionnaire : ComponentBase<Questionnaire, HTMLElement>

Inline questionnaire that shows a question and a list of choice buttons. Once the user picks an answer (or it is set programmatically via SetAnswer) the component switches to a "response selected" mode that shows the question with the chosen answer highlighted and disables further input.

Namespace: Tesserae
Inheritance: ComponentBase<Questionnaire, HTMLElement> → Questionnaire

Constructors

Name	Description
Questionnaire	Initializes a new instance of this class.

Constructor

Questionnaire

public Questionnaire(string question, IEnumerable<string> options)

Initializes a new instance of this class.

Properties

Name	Description
Question	Gets the question shown by the component.
Answer	Gets the answer currently selected, or `null` when no answer has been set.
IsAnswered	Returns a value indicating whether the component is in the "response selected" mode.

Property

Questionnaire.Question

public string Question

Gets the question shown by the component.

Property

Questionnaire.Answer

public string Answer

Gets the answer currently selected, or null when no answer has been set.

Property

Questionnaire.IsAnswered

public bool IsAnswered

Returns a value indicating whether the component is in the "response selected" mode.

Methods

Name	Description
SetQuestion	Sets the question of the component.
AddOption	Adds the given option to the component.
AddOptions	Adds the given range of options to the component.
SetAnswer	Sets the selected answer and switches the component into the "response selected" mode. Calling this does not invoke the `OnAnswered` callback — use this to reflect an already-known answer (e.g. one fetched from the server).
ClearAnswer	Clears the selected answer and re-enables the option buttons.
OnAnswered	Registers a callback invoked when the user picks an option. The callback is not invoked when the answer is set programmatically via `SetAnswer`.
Render	Renders the component's root HTML element.

Method

Questionnaire.SetQuestion

public Questionnaire SetQuestion(string question)

Sets the question of the component.

Method

Questionnaire.AddOption

public Questionnaire AddOption(string option)

Adds the given option to the component.

Method

Questionnaire.AddOptions

public Questionnaire AddOptions(IEnumerable<string> options)

Adds the given range of options to the component.

Method

Questionnaire.SetAnswer

public Questionnaire SetAnswer(string answer)

Sets the selected answer and switches the component into the "response selected" mode. Calling this does not invoke the OnAnswered callback — use this to reflect an already-known answer (e.g. one fetched from the server).

Method

Questionnaire.ClearAnswer

public Questionnaire ClearAnswer()

Clears the selected answer and re-enables the option buttons.

Method

Questionnaire.OnAnswered

public Questionnaire OnAnswered(Action<Questionnaire> onAnswered)

Registers a callback invoked when the user picks an option. The callback is not invoked when the answer is set programmatically via SetAnswer.

Method

Questionnaire.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Questionnaire

Description

Samples

Asking and answering

Reflecting a known answer

API reference

Constructors

Questionnaire

Properties

Questionnaire.Question

Questionnaire.Answer

Questionnaire.IsAnswered

Methods

Questionnaire.SetQuestion

Questionnaire.AddOption

Questionnaire.AddOptions

Questionnaire.SetAnswer

Questionnaire.ClearAnswer

Questionnaire.OnAnswered

Questionnaire.Render

See also