Use markdown to render images in title and question elements, Knockoutjs Survey Library Example

Markdown Radiogroup

Edit in Plunker

Open in new window

Export Pdf

Result
JavaScript
HTML
Documentation
QR Code


                        
        
            Survey.StylesManager.applyTheme("modern");
        


            
                var json = { questions: [
  {
    "type": "radiogroup",
    "hasOther": true,
    "isRequired": true,
    "name": "favoritePet",
    "title": "What is your favorite pet ![A parrot](https://surveyjs.io/Content/Images/examples/markdown/image_16x16.svg =16x16) ?",
    "choices": [
      {
        "value": "dog",
        "text": "Dog: ![A dog](https://surveyjs.io/Content/Images/examples/markdown/dog.svg =14x14)"
      },
      {
        "value": "cat",
        "text": "Cat: ![A cat](https://surveyjs.io/Content/Images/examples/markdown/cat.svg =14x14)"
      },
      {
        "value": "parrot",
        "text": "Parrot ![A parrot](https://surveyjs.io/Content/Images/examples/markdown/parrot.svg =14x14)"
      }
    ]
  }
   ]
};

                window.survey = new Survey.Model(json);
            
        
            survey.onComplete.add(function(result) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.data, null, 3);
            });
        
//Create showdown mardown converter
var converter = new showdown.Converter();
survey.onTextMarkdown.add(function(survey, options){
    //convert the mardown 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;
});
            
                survey.render("surveyElement");

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Use markdown to render images in title and question elements, Knockoutjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://surveyjs.azureedge.net/1.7.10/survey.ko.js"></script>
<link href="https://surveyjs.azureedge.net/1.7.10/modern.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>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" 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.

Markdown Radiogroup

Use markdown to render images in title and question elements

Why We Use Cookies