Multiple-choice question survey layout

Hi ​@AJ1243 ,

You can use below code and have it viewed like this.

JS:

Qualtrics.SurveyEngine.addOnReady(function()
{

// Select the iframe and question container
    const iframe = document.querySelector("iframe");
    const questions = document.querySelector("#Questions");
    // Wrap the iframe and questions in a new container
    const layoutContainer = document.createElement("div");
    layoutContainer.style.display = "flex";
    layoutContainer.style.flexDirection = "row";
    layoutContainer.style.gap = "20px";
    // Set styles for iframe (left)
    iframe.style.width = "50%";
    iframe.style.height = "100vh";
    iframe.style.border = "none";
    // Set styles for questions (right)
    questions.style.width = "50%";
    // Move the existing elements into the layout container
    const parent = questions.parentElement;
    parent.insertBefore(layoutContainer, questions);
    layoutContainer.appendChild(iframe);
    layoutContainer.appendChild(questions);

});

HTML:

Include your file source link

<iframe style="border: none; width: 100%; height: 100vh;" src=""></iframe>

Hi Deepak,

This solution is perfect! Thank you very much! Do you know how I can remove the padding on the left and right side of the screen - for only these questions (not the entire survey). Its making it quite difficult to read the text of the pdf.

Thanks again!

​@Deepak 

You can include below CSS in HTML of the question.
<style>

.Skin .SkinInner {
display: inline !important;

}
</style>

Amazing. Thanks ​@Deepak. I tried this code for the whole survey bit didn’t add it to the specific question before with the <style> formatting.

​@Deepak, do you know why my progress bar may be causing issues? As soon as the survey goes to pages with custom code, the progress bar immediately skips to 80%

Not sure, but progress bar behaves like that when there is a skip logic or display logic which has skipped a set number of questions.
Also, can you please mark it as resolved if the original question is answered.

Thanks ​@Deepak. Last question if you don’t mind. do you know how to add a bit more border back to the top and side of the survey here with the code you provided? Thanks

Try this:

Qualtrics.SurveyEngine.addOnReady(function() {
    // Select the iframe and question container
    const iframe = document.querySelector("iframe");
    const questions = document.querySelector("#Questions");
    // Wrap the iframe and questions in a new container
    const layoutContainer = document.createElement("div");
    layoutContainer.style.display = "flex";
    layoutContainer.style.flexDirection = "row";
    layoutContainer.style.gap = "20px";
    layoutContainer.style.padding = "20px"; // Adds space inside the container
    layoutContainer.style.marginTop = "20px"; // Adds space above the container
    layoutContainer.style.marginLeft = "10px"; // Adds space to the left of the container
    // Set styles for iframe (left)
    iframe.style.width = "50%";
    iframe.style.height = "100vh";
    iframe.style.border = "none";
    // Set styles for questions (right)
    questions.style.width = "50%";
    // Move the existing elements into the layout container
    const parent = questions.parentElement;
    parent.insertBefore(layoutContainer, questions);
    layoutContainer.appendChild(iframe);
    layoutContainer.appendChild(questions);
});