Moving Next and Previous Arrows

Question

Hi all!I'm wondering if there is a way to move the 'next' and 'previous' arrows around on the survey? We currently have them at the bottom of our survey, but we noticed while previewing it that on some of the pages it feels like there is a lot of moving back and forth when you click the answer to the questions and have to move to the other side of the screen to click 'next'. I'm wondering if there is a way to move the arrows up closer to the text of the questions and possibly move them closer together/towards the center as well?Thanks so much!Jacinda

Tom_1842 · Answer

Hi there, if you still need, the position of the next and previous buttons can be adjusted with CSS. Also, the Buttons can be copied and displayed at the top of the survey as well as the bottom. I adapted the code from this thread and made it so that the Header buttons become less opaque when clicked, matching what happens when the bottom Buttons are clicked.To copy the next/previous buttons to to the top of the survey, add the below to the Header in the General section of the survey's Look & Feel:Qualtrics.SurveyEngine.addOnReady(function() {jQuery('#Buttons').clone().appendTo('#Header');jQuery('#Header #Buttons #NextButton').click(function() {    jQuery('#SkinContent #Buttons #NextButton').click();jQuery('#Header #Buttons').css({ opacity: 0.5 });});jQuery('#Header #Buttons #PreviousButton').click(function() {    jQuery('#SkinContent #Buttons #PreviousButton').click();jQuery('#Header #Buttons').css({ opacity: 0.5 });});});To add styling that makes the Buttons display in the center of the screen, add the below to the Custom CSS in the Style section of the survey's Look & Feel:.Skin #Buttons {text-align: center;margin-top: 0px;padding: 3px;}.Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {float: none;margin: 3px;}

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded