Hello,

I have a page where a reminder to make the decision is supposed to appear after 10 seconds. While the following code does make the reminder appear, it places it outside the block in the bottom left corner of the page. Any ideas how I can move this message inside the block? Thanks so much!

{{ block title }}
    Ihre Entscheidung
{{ endblock }}
{{ block content }}
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
      setTimeout(function () {
         $("body").append("<p>Bitte treffen Sie <strong>jetzt</strong> Ihre Entscheidung!</p>").fadeIn();
      }, 10000);
   });
</script>
<br>
<p><strong>Runde {{subsession.round_number}} von 8.</strong></p>
{{ formfield 'give' }}

    {{ next_button }}
{{ endblock }}

Try something like the following:


{{ block title }}

Ihre Entscheidung

{{ endblock }}


{{ block content }}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
     setTimeout(function() {
        document.getElementById("hurry-up").innerHTML = "Bitte treffen Sie <strong>jetzt</strong> Ihre Entscheidung!";
     }, 10000);
  });
</script>
<br>
<p><strong>Runde {{subsession.round_number}} von 8.</strong></p>
{{ formfield 'give' }}

{{ next_button }}
   
<p id="hurry-up"></p>
   
{{ endblock }}


By the way, ideally avoid hard-coding stuff as much as possible. That is, instead of

<p><strong>Runde {{subsession.round_number}} von 8.</strong></p>

use

<p><strong>Runde {{subsession.round_number}} von {{ C.NUM_ROUNDS }}.</strong></p>

That made it work. Thank you very much!

And here is a version with a “fade-in” effect like you seem to desire (plus the message being highlighted via the “alert-danger” Bootstrap CSS class):


{{ block title }}

Ihre Entscheidung

{{ endblock }}


{{ block content }}

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
     setTimeout(function() {
        document.getElementById("hurry-up").style.opacity = "1";
     }, 10000);
  });
</script>
<br>
<p><strong>Runde {{subsession.round_number}} von 8.</strong></p>
{{ formfield 'give' }}

{{ next_button }}
   
<p id="hurry-up" class="alert alert-danger" style="opacity: 0; transition: opacity 0.75s;">Bitte treffen Sie <strong>jetzt</strong> Ihre Entscheidung!</p>
   
{{ endblock }}

Awesome, thank you! I really appreciate it!