Javascript to show screen flip alert in different languages

Question

I want people to flip their phones when they enter a conjoint exercise for better visibility. The survey is in English and Spanish, so the alert and error message needs to show in Spanish when the language has been selected at the beginning of the survey in a question we ask called Sp (1=Spanish, 2=English).
I have this code in the footer of the conjoint question for simple English alert/messaging. What do I need to add to show it in Spanish? The message would be
"Gire su dispositivo a una posición horizontal (paisaje) para ver todas las opciones en las preguntas de esta sección."

<script type="text/javascript">
if($(window).width()<$(window).height() && $(window).width()<500)
{
    alert("Please flip your device to a horizontal position (landscape)to see all the options for the questions in this section.");
    strErrorMessage = "Please flip your device to a horizontal position (landscape) to see all the options for the questions in this section.";
}
</script>

Comments

We can make your messages change based on language, but it seems like there may be some bigger fish to take care of first.  Is this message meant to show up on page load or when a respondent attempts to submit a page with the wrong orientation?  Are you okay with it showing up once and being dismissed or do you want it to stick around until the respondent flips their device?

---

It is more for a page load so they are able to see as much as possible of the conjoint exercise. I'd prefer if it sticks around until the device is flipped to have a consistent experience.

Answer 1

How is this?

<div id="orientationOverlay">
    <div id="orientationOverlayBody">
        <span>
            Flip your phone.
        </span>
    </div>
</div>

<style>
#orientationOverlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999999;
}

#orientationOverlayBody {
    position: fixed;
    background-color: white;
    border: 1px solid black;
    border-radius: 8px;
    padding: 24px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

<script>
$(document).ready(function(){
    var page = $('#page');
    var overlay = $('#orientationOverlay');
    $(page).after(overlay);
    
    $(window).resize(function(){
        var width = $(window).width();
        var height = $(window).height();
        if (width < 500 && width < height) {
            $(page).css('opacity', 0.5);
            $(overlay).show();
        }
        else {
            $(page).css('opacity', 1);
            $(overlay).hide();
        }
    });
    $(window).resize();
})
</script>

Comments

How do you the message to Flip the phone in Spanish based on a language variable using this code?

---

How are you replacing other texts in your survey?

---

I use a language question called Sp. I added code via the macro you developed to present the language based on that question.

---

Then all you should need to do is take some of that working HTML from elsewhere in the survey, paste it in place of lines 3 - 5 above, and update the text to the messages you want to display.