markdown_widget_builder 0.0.3

Widget builder for surveys defined using markdown-like syntax.

Markdown Widget Builder

This package is designed to define human-computer interaction widgets to build a Flutter widget as a markdown page using a markdown-like syntax, making it suitable for use in surveys and similar scenarios.

The following is the syntax to generate interactive surveys in markdown pages.

In the example code of this package, the path of the sample markdown file is example/assets/sample_markdown.md. This path can be set in the code to load the markdown file at runtime.

Survey Menu

%% Menu-Begin and %% Menu-End will be recognised as the beginning and end of the menu. The content between this group of tags must be a list, and each item in the list will be recognised as a separate survey. The content of each survey needs to be defined in the subsequent sections of the markdown file, with the same name used as the title.

For example, the following snippet from the markdown file:

%% Menu-Begin
- GAD-7 Survey
- PHQ-9 Survey
- Symptom Checker
%% Menu-End

## GAD-7 Survey
Description: The Generalized Anxiety Disorder 7 (GAD-7) is a self-report
questionnaire used to assess the severity of generalized anxiety disorder (GAD).

## PHQ-9 Survey
Description: The Patient Health Questionnaire 9 (PHQ-9) is a self-report
questionnaire used to assess the severity of depression.

## Symptom Checker
Description: The Symptom Checker is a self-report questionnaire used to assess
the severity of symptoms.

will generate a list of surveys with the titles GAD-7 Survey, PHQ-9 Survey, and Symptom Checker. If users click on any of these surveys, they will be redirected to the Survey Details page with the corresponding survey details.

Slider Bar

%% Slider(name,min,max,defaultValue,step) will be recognised as a slider bar with the given name, min, max, defaultValue, and step values. The slider bar will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Slider(Question 1,1,4,1,1)

Button

%% Button-Begin(label,type,path) and %% Button-End will be recognised as a button. The parameter label is the text displayed on the button, type is the type of the button (0 - Save to JSON file (default), 1 - Submit to URL), and path is the path to redirect to or save to when the button is clicked. The default file name is result.json. The button will be displayed on the Survey Details page.

Between the Button-Begin and Button-End tags is a list of widget IDs containing all required fields. When the button is clicked, the widget will check if all required fields are filled in. If all required fields are filled in, the widget will save the data to the specified path or submit it to the specified URL. If any required fields are not filled in, the widget will display an error message and prevent the data from being saved or submitted.

For example, the following snippet from the markdown file:

%% Button-Begin(Save,0)
- Question 1
- Question 4
%% Button-End

Radio Button

%% Radio(name,value,label,hidden) will be recognised as a radio button with the given name, value, label and hidden_content. Users can use escape characters \(, \), and \" to display parentheses and quotation marks in the label. The radio button will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Radio(Radio1,1,"Option 1")
%% Radio(Radio1,2,"Option 2 \(Recommended\)",Hidden 1)

Checkbox

%% Checkbox(name,value,label,hidden) will be recognised as a checkbox with the given name, value, label and hidden_content. Users can use escape characters \(, \), and \" to display parentheses and quotation marks in the label. The checkbox will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Checkbox(Checkbox1,A,"Option 1")
%% Checkbox(Checkbox1,B,"Option 2 \(Recommended\)")
%% Checkbox(Checkbox1,C,"Option 3",Hidden 1)

Hidden

If the user needs to answer the next question after selecting a specific radio button or checkbox, you can use the %% Hidden command. The Hidden command consists of two parts: Hidden-Begin and Hidden-End. The content to be hidden is placed between these two parts.

For example, the following snippet from the markdown file:

%% Hidden-Begin(Hidden 1)
Please answer the following question after selecting Option 1.
InputML(HiddenQuestion)
%% Hidden-End

In this example, Hidden 1 is the ID of the hidden content. We can add arguments to the %% Radio or %% Checkbox command to bind this hidden content. The specific approach is as follows:

%% Radio(Radio1,1,"Option 1",Hidden 1)
%% Checkbox(Checkbox1,A,"Option 1",Hidden 1)

Input Box

%% InputSL(name) will be recognised as a single-line input box with the given name, and %% InputML(name) will be recognised as a multi-line input box with the given name. The input box will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

Your name:
%% InputSL(Name)
Your feedback:
%% InputML(Feedback)

Description Box

%% Description-Begin and %% Description-End will be recognised as the beginning and end of the description box. The content between these tags will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Description-Begin

Over the **last 2 weeks**, how often have you been bothered by the following
problems? Tap your answers.

%% Description-End

Calendar

%% Calendar(name) will be recognised as a calendar with the name name and will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Calendar(Date)

Dropdown

%% Dropdown(name) will be recognised as a dropdown with the name name and will be displayed on the Survey Details page. The content of the dropdown needs to be defined in the subsequent sections of the markdown file as a list.

For example, the following snippet from the markdown file:

%% Dropdown(Dropdown1)
- Option 1
- Option 2
- Option 3

Font Size

%% H1-Begin and %% H1-End will be recognised as the beginning and end of the H1 font size. The content between these tags will be displayed in H1 font size on the Survey Details page. Similarly, H2 to H6 font sizes are also supported here.

For example, the following snippet from the markdown file:

%% H1-Begin
Text in H1 font size
%% H1-End

Text Alignment

%% AlignRight-Begin and %% AlignRight-End will be recognised as the beginning and end of the right-aligned text. The content between these tags will be displayed as right-aligned text on the Survey Details page. Similarly, left-aligned, center-aligned and justified text alignments are also supported here. The syntax for these are %% AlignLeft-Begin, %% AlignCenter-Begin, and %% AlignJust-Begin respectively.

For example, the following snippet from the markdown file:

%% AlignRight-Begin
Text aligned to the right
%% AlignRight-End

Adjust Font Size and Text Alignment at the Same Time

%% H1Right-Begin and %% H1Right-End will be recognised as the beginning and end of the H1 font size and right-aligned text. The content between these tags will be displayed in H1 font size and right-aligned on the Survey Details page. Similarly, H2 to H6 font sizes and left/right/center/justify-aligned text are also supported here. The syntax for these are % H1Left-Begin, %% H1Center-Begin, and %% H1Just-Begin respectively.

For example, the following snippet from the markdown file:

%% H1Right-Begin
Text in H1 font size and right-aligned
%% H1Right-End

Image

%% Image(filename.jpg) will be recognised as an image with the given filename in assets/media folder. The image will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Image(image.jpg)

Video

%% Video(filename.mp4) will be recognised as a video with the given filename in assets/media folder. The video will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Video(video.mp4)

Audio

%% Audio(filename.mp3) will be recognised as an audio file with the given filename in assets/media folder. The audio file will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Audio(audio.mp3)

Countdown Timer

%% Timer(time) will be recognised as a countdown timer with the given time in the format of 1h0m0s. The countdown timer will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% Timer(1h0m0s)

Empty Line

%% EmptyLine will be recognised as an empty line. An empty line will be displayed on the Survey Details page.

For example, the following snippet from the markdown file:

%% EmptyLine

Pagination

%% PageBreak will be recognised as a page break. The content after the PageBreak tag will be displayed on the next page.

For example, the following snippet from the markdown file:

%% PageBreak