Hi Michelle,

Although ExtJS code in general can be set to use a blank like in the following example here:

https://fiddle.sencha.com/#fiddle/d8h

I'm not certain how we'd be able to render it properly within the Survey Editor. You can use a   as a value so the dropdown appears with a blank, but without something to swap out the   with an actual empty value upon selection, you will literally see " " as the selected option.

Regarding the likert scale, I haven't found any examples of ExtJS being able to pull this off (I've seen HTML ones only). However, I will confirm with our developers whether if a Likert scale is possible or not and whether a proper blank combobox solution.

Regards,

Jon

Hi Michelle,

So there is a way to do both things successfully.

This is the code sample for a combobox dropdown that will allow you to have a blank:

        {
          "extConfig": {
            "width": 800,
            "hidden": false,
            "xtype": "combo",
            "name": "choices",
            "fieldLabel": "choices",
            "queryMode": "local",
            "displayField": "Text",
            "valueField": "value",
            "emptyText": "Select...",
            "forceSelection": true,
            "displayTpl": "<tpl for='.'><tpl if='Text != \"&nbsp;\"'>{Text:htmlEncode}</tpl></tpl>",
            "store": {
              "fields": [{"name": "Text"}, "value"],
              "data" : [
                {"Text": "&nbsp;", "value": "0"},
                {"Text": "Bacon", "value": "Bacon"},
                {"Text": "Eggs", "value": "Eggs"},
                {"Text": "Waffles", "value": "Waffles"},
                {"Text": "Pancakes", "value": "Pancakes"}
              ]
            }
          }
        }

Now, to create something that looks like a Likert scale, you can use radio buttons to accomplish this. The example code is below:

        {
          "extConfig": {
            "width": 800,
            "hidden": false,
            "fieldLabel": "Some Radio",
            "xtype": "radiogroup",
            "name": "someradio",
            "columns": 5,
            "items": [
              {
                "boxLabel": "Item 1",
                "name": "some",
                "inputValue": 1
              },
              {
                "boxLabel": "Item 2",
                "name": "some",
                "inputValue": 2
              },
              {
                "boxLabel": "Item 3",
                "name": "some",
                "inputValue": 3
              },
              {
                "boxLabel": "Item 4",
                "name": "some",
                "inputValue": 4
              },
              {
                "boxLabel": "Item 5",
                "name": "some",
                "inputValue": 5
              }
            ]
          }
        }

Give these a try and let us know if you have any further questions.

Regards,

Jon

Thank you very much!

It's working like it should.

But I have another question: Is it possible to insert images in a survey? I tried to insert a footer-wiki with images but it's not really pretty and we always have to scroll up to answer the questions about the images...

Regards,

Michele

Hi Michelle,

Can you give me some more detail. When you say you want to insert images into the survey, where are you wanting the images to go specifically?

Can you provide us with a mock-up graphic or something visual to get a better understanding of what you're needing here?

Regards,

Jon

Hi Jon,

Thank you for your help. I send you some attachments for better understandig what we would like to do....

Regards,

Michele

Jon,

I have another question: I have another survey with likert scales. The answers are very long and it looks not really pretty. Is there a possibility to arrange the items in a better way (horizontally?)?

Thanks a lot

Michele

Hi Michelle,

Thanks for the graphics, but the first mock-up is a little confusing. You have one image that has four options underneath like having a Likert choice underneath the photo, but then the other graphics below it appears that each line would have some kind of hyperlink to show the image instead. Were you trying to do a likert question with an image above it or the other option?

As for the long answers, if you change the option to where you only have columns set to "1", the choice will stack as:

1. Text
2. Text
3. Text
4. Text

Rather than:

1. Text 2. Text. 3. Text 4. Text

Regards,

Jon

Hi Jon

Thanks for you help (so easy, but effective!)! And sorry confusing you! I try it again. It should look like this.....

Regards,

Michèle

Hi Michele,

Can you send us the example again? It didn't come across in your reply.

Regards,

Jon

Hi Jon

Sorry about that! It's my fault!.....

Thanks Michele,

It took a bit, but I believe I have an adequate solution for what you're looking for.

So obviously for the radio buttons to be stacked in a single column, you would have to set your columns to 1, but the trickier part was two things:

1. Finding a way to render images.

2. Finding a way to render the question with the image as:

QUESTION | IMAGE | MULTIPLE CHOICE ANSWERS

or

QUESTION | MULTIPLE CHOICE ANSWERS | IMAGE

So my idea was for you to use tables and since the radiogroup option already sets itself up as QUESTION | MULTIPLE CHOICE ANSWERS, I figured that we could use the second option and have two cells like this:

[QUESTION | MULTIPLE CHOICE ANSWERS] [IMAGE]

This would have the radiogroup in one cell and the image in the other. The image would be rendering via HTML tags.

So using your original Brice survey code and paring down the information to make a basic working model, I came up with the following:

{
  "survey" : {
    "sections" : [{
      "title" : "BRICE Interview",
      "collapsible" : true,
      "description" : null,
       "questions" : [{
             "extConfig": {
                  "xtype": "panel",
                  "layout": {
                      "type": "table",
                      "columns": 2
                       },
             "items": [{
                            "hidden": false,
                       "fieldLabel": "1. Letzte Erinnerungen bevor Sie einschliefen?",
                         "xtype": "radiogroup",
                         "name": "erinvor",
                         "columns": 1,
                         "items": [{
                            "boxLabel": "im OP-Bereich / Wartezone zu sein",
                            "name": "erinvor",
                            "inputValue": "a. im OP-Bereich/Wartezone zu sein"
                              },{
                            "boxLabel": "im OP-Saal zu sein",
                            "name": "erinvor",
                            "inputValue": "b. im Operationssaal zu sein"
                              },{
                            "boxLabel": "mit Angehörigen zu sein",
                            "name": "erinvor",
                            "inputValue": "c. mit Ihren Angehörigen zusammen zu sein"
                              },{
                            "boxLabel": "Stimmen zu hören",
                            "name": "erinvor",
                            "inputValue": "d. Stimmen zu hören"
                            }]
                         },{
                              "xtype": "panel",
                             "html": "<img src='http://www.google.com/images/srpr/logo11w.png' width='200'/>"
                         }]
                     }
                  }],
      "header" : true
    }],
    "showCounts" : false,
    "layout" : "card"
  }
}

I decided to use the Google Logo just to show that you can use a full URL with the HTML tag.

You'll have to do some tweaking of the widths within each item/cell, but I think this should work as a decent template for you to build off of.

Regards,

Jon

Hi Jon

Thanks a lot for your help! It works. But I still have two Problems.....

Regards,

Michele

Michele,

I'm having difficulty opening your attachment. Can you tell me specifically what the problem is?

Regards,

Jon

Hi Jon

A PDF is probably better?.....

Regards,

Michele

Hi Michele,

Thank you for the PDF file.

It looks like you just need to dictate the widths within your code for each section so it will align properly.

I however still don't understand the other part you're talking about. What exactly is your question regarding the Text Field w/Skip Logic?

Regards,

Jon