JavaScript for popup message | XM Community
Skip to main content

I am using the JavaScript below to have a popup message of "Correct!" when the correct multiple choice answer is chosen, but how can I remove the "bridgew.az1.qualtrics.com says" before the "Correct!"?

Qualtrics.SurveyEngine.addOnReady(function()
{
var that = this;
  var msg = 'Correct!';
  jQuery("#NextButton").on('click',function(){
    var correctrecode = 3;
    var choiceid = jQuery("#"+that.questionId+" inputotype='radio']:checked").attr("choiceid");
    var selectedrecode = that.getChoiceRecodeValue ( choiceid );
    if(correctrecode==selectedrecode){
    alert(msg);
  }

  });

});

Hi JoB ,
Since ,alert is an inbuilt function of JS . So , I don't know how to customize it.
But , I will suggest you to use a custom dialog box and you can customize it as per needs.
I have made a basic dialog box code for the same in function form where you can pass your message as parameter.
function customDialog(message) {
  const overlay = document.body.appendChild(document.createElement("div"));
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  `;


  const dialogBox = overlay.appendChild(document.createElement("div"));
  dialogBox.style.cssText = `
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    padding: 1em;
    text-align: center;
    width: 30%;
  `;


  dialogBox.appendChild(document.createElement("p")).textContent = message;


  const closeButton = dialogBox.appendChild(document.createElement("button"));
  closeButton.textContent = "Close";
  closeButton.style.cssText = `
    background-color: #ccc;
    border: 1px solid #000;
    border-radius: 5px;
    margin-top: 1em;
    padding: 0.5em;
    width: 100%;
  `;
  closeButton.addEventListener("click", () => document.body.removeChild(overlay));
}
You can append your code with my message in your code as below :
Qualtrics.SurveyEngine.addOnReady(function()


{
function customDialog(message) {
  const overlay = document.body.appendChild(document.createElement("div"));
  overlay.style.cssText = `
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
  `;


  const dialogBox = overlay.appendChild(document.createElement("div"));
  dialogBox.style.cssText = `
    background-color: #fff;
    border: 1px solid #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    padding: 1em;
    text-align: center;
    width: 30%;
  `;


  dialogBox.appendChild(document.createElement("p")).textContent = message;


  const closeButton = dialogBox.appendChild(document.createElement("button"));
  closeButton.textContent = "Close";
  closeButton.style.cssText = `
    background-color: #ccc;
    border: 1px solid #000;
    border-radius: 5px;
    margin-top: 1em;
    padding: 0.5em;
    width: 100%;
  `;
  closeButton.addEventListener("click", () => document.body.removeChild(overlay));
}




var that = this;


  var msg = 'Correct!';


  jQuery("#NextButton").on('click',function(){


    var correctrecode = 3;


    var choiceid = jQuery("#"+that.questionId+" inputttype='radio']:checked").attr("choiceid");


    var selectedrecode = that.getChoiceRecodeValue ( choiceid );


    if(correctrecode==selectedrecode){


    customDialog(msg);


  }






  });
You can customize this dialog box to suit your requirement by changing the CSS.
Here is a snapshot:
image.png
Hope it resolves your query😊!!!


qualtrics_nerd was a bit quicker than me! The code works well but the page advances while the custom message is displayed, so the respondent could see the following question while the custom dialog box is displayed. Another approach:
In looking into this a bit, it is advised here that "browser adds that so that the user knows that the message isn't from the browser itself. The only thing you can do is stop using alert entirely, and instead use modern techniques for overlaying an element on top of the page"
Elsewhere, it is recommended to use Modals to act in place of alerts, and that is the solution I propose below. I adapted it from here. Using alert, prompt, and confirm are all effective at stopping the processing of more JavaScript, but we will need to find a way to stop the page advance on NEXT button click if alternatives to alert are to be explored.
So, I also propose using a fake next button here and adding JavaScript to advance to the next question when the button within the Modal is clicked.
To give it a try, first create a Multiple Choice question and use the Rich Content Editor's HTML/Source view "<>" to update the Question Text with the below, which will include the pop up message:
Click to write the question text


Then, over in the question's JavaScript in the OnReady section, add the below. It create a fake next button, styles it, and then checks for a correct answer and displays the Modal if true.
//create fake next button//
const next = document.getElementById("NextButton");
const newnext = next.cloneNode(true);
newnext.id = "newnext";
jQuery(newnext).appendTo("#Buttons");
jQuery(next).css({"visibility":"hidden"});

//style the button//
jQuery(newnext).css({
    "border": "none",
    "color": "#fff",
    "font-size": "16px",
    "padding": "8px 20px",
    "-webkit-border-radius": "4px",
    "-moz-border-radius": "4px",
    "-ms-border-radius": "4px",
    "-o-border-radius": "4px",
    "border-radius": "4px",
    "cursor": "pointer",
    "margin": "0",
    "text-align": "center",
    "text-decoration": "none",
    "-webkit-appearance": "none",
    "transition": "background .3s",
    "background-color": "#007ac0"
});

//answer checking//
var that = this;
  var msg = 'Correct!';
  jQuery("#newnext").on('click',function(){
    var correctrecode = 3;
    var choiceid = jQuery("#"+that.questionId+" inputdtype='radio']:checked").attr("choiceid");
    var selectedrecode = that.getChoiceRecodeValue ( choiceid );
    if(correctrecode==selectedrecode){

//pop up handling//
  jQuery('.modal').toggleClass('is-visible');
  jQuery("#Modalbutton").on('click',function(){
jQuery(next).click();
  });  
}else{
jQuery(next).click();
jQuery(next).css({ opacity: 0.5 });
};   

  });
AnswerCheck_PopUp.png


Leave a Reply