Survey-library: HTML Markup in Question Title

[Chry007]

Hi,

I am trying to have a question title and subtitle with further description of the question in my survey. Therefore I wanted to just use basic HTML Markup in the question title but I only get the Markup output as text. Is there any way to change this?

[andrewtelnov]

@Chry007 What markdown engine to you use? We are using showdown in this example: http://surveyjs.org/examples/jquery/survey-markdown-matrix/
By the way, we have "add question.description" property in out TODO list. It should be really easy to implement and I may do it tomorrow, for example. In this case, it will be in the next minor update.

Thank you,
Andrew

[Chry007]

Hi @andrewtelnov,
thanks for the quick reply. I am not using a markdown engine. All I'm trying to do is set the title to something like this:
question.question_text + " <br /> <span style="">Subtitle ... </span>"
But as output I get:
Question ... <br /> <span style ="">Subtitle ...</span>
The problem seems to be that special characters are being escaped so HTML markup is not being interpreted.

[andrewtelnov]

@Chry007 Unfortunately it will not work. The engine consider question.title as text. The correct approach is to use markdown. I gave the link on the demo in the previous reply.
The question.description property functionality is almost done. It will be in the next minor update on this week: https://github.com/surveyjs/surveyjs/issues/579

Thank you,
Andrew

[Chry007]

@andrewtelnov All right! :) Thanks for the clarification!

[trevcl]

@andrewtelnov Hi Andrew, Just following up on @Chry007 comment above
I too wanted to use HTML or markdown in a question title or description. I was using the showdown markup as per the surveyjs documentation and I am using the latest release.
I can see the description appear under the title but it is not rendering HTML or markdown as I would have hoped it would.
For example,
{ type: "radiogroup",isRequired: true, name: "section1question1", title: "[Test Link](https://github.com/showdownjs/showdown)<span>Test</span>", choices: ["Yes", "No"], description:"[Test Link](https://github.com/showdownjs/showdown)<span>Test</span>"},
The HTML is not rendered as HTML but has been converted into:
<span style="">1. * [Test Link](https://github.com/showdownjs/showdown)&lt;span&gt;Test&lt;/span&gt;</span></h5><div class="small"><span style="">[Test Link](https://github.com/showdownjs/showdown)&lt;span&gt;Test&lt;/span&gt;</span>
Is it possible to print a link out using markdown or print HTML in the title or description of a radiogroup question?

Thanks in advance,
Trevor

[andrewtelnov]

@trevcl The description has been already implemented and it supports markdown. Here is the plunker example: https://plnkr.co/edit/Jvou2vokWwvHG7p8TdVa?p=preview

Thank you,
Andrew

[trevcl]

Hi Andrew,
Stupid mistake on my part. I didn't realise I would have to include the additional showdown.js file.
All is working as expected.
Thanks,
Trevor

[yidan]

Any plan to include HTML markup or functions in question title? This will make it robust! Some usecase can be

• highlight/bold/underline certain phrases in the title
• conditional display texts based on other questions (using functions)

[andrewtelnov]

@yidan You may use our markdown support. Here is the example

Thank you,
Andrew

[yidan]

@andrewtelnov Thanks Andrew! Got it! So we can include a markdown library to implement the HTML functionality in title text. That's awesome! I was a bit confused by the markdown concept earlier. Appreciate your follow-up!

[markatlish]

Markdown is typically the way to go. But if you really want unprocessed/unsanitized HTML to pass through, it's possible by using the markdown support and omitting any conversion.

Use the raw HTML in place of the 'converted' markdown output, like this:

model.onTextMarkdown.add((survey, options) => {
    options.html = options.text;
});