Cart Licenses Contact Support Online Creator Log in/Register
Try
Free
v 1.9.43

Markdown Matrix


                        
        
            Survey.StylesManager.applyTheme("modern");
        



                
                    var json = {
  "elements": [
    {
      "type": "matrix",
      "name": "factors",
      "title": "Please indicate how **important** *these factors* are when deciding on your vacation destination?",
      "columns": [
        {
          "value": 1,
          "text": "Not <br /> important <br /> 1"
        },
        {
          "value": 2,
          "text": "<br /><br />2"
        },
        {
          "value": 3,
          "text": "<br /><br />3"
        },
        {
          "value": 4,
          "text": "<br /><br />4"
        },
        {
          "value": 5,
          "text": "<br /><br />5"
        },
        {
          "value": 6,
          "text": "<br /><br />6"
        },
        {
          "value": 7,
          "text": "Very<br /> important <br /> 7"
        }
      ],
      "rows": [
        {
          "value": "luxuries",
          "text": "*Indulgent luxuries*"
        },
        {
          "value": "beaches",
          "text": "Quality beaches"
        },
        {
          "value": "cultural",
          "text": "*Cultural activities*"
        },
        {
          "value": "cuisine",
          "text": "Unique cuisine"
        },
        {
          "value": "wildlife",
          "text": "*Interaction with local wildlife*"
        },
        {
          "value": "nightlife",
          "text": "Nightlife"
        },
        {
          "value": "shopping",
          "text": "*Shopping*"
        }
      ]
    }
  ]
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
var myCss = { matrix: {root: "table table-striped"}};

//Create showdown markdown converter
var converter = new showdown.Converter();
survey.onTextMarkdown.add(function(survey, options){
    //convert the markdown text to html
    var str = converter.makeHtml(options.text);
    //remove root paragraphs <p></p>
    str = str.substring(3);
    str = str.substring(0, str.length - 4);
    //set html
    options.html = str;
});
        
            ReactDOM.render(
            <SurveyReact.Survey model={survey}  css={myCss} />, document.getElementById("surveyElement"));
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Markdown Matrix, Reactjs Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/babel" src="./index.js"></script>

</body>
</html>

SurveyJS supports markdown via onTextMarkDown event. You may use any JavaScript markdown library. In this example, we are using Showdown markdown. You may use all features that this or other libraries have.

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.