Typewriter effect | XM Community
Skip to main content
Solved

Typewriter effect

  • August 29, 2020
  • 4 replies
  • 175 views
B
Forum|alt.badge.img

Hello, 

I am carrying out a study in which I wish to make several people's speeches appear in writing. 
For example: Math: "I like apples".
My problem is that I would like "I like apples" to appear letter by letter on the screen and not all at once.

So I would like to create a typewriter effect.

Any help would be greatly appreciated! 

Thanks!

Best answer by rondev

Paste the below code in the HTML view of the question

 
Paste the below code in the onReady function of the javascript:

function typeWriter() {
      if (i < txt.length) {
         document.getElementById("demo").innerHTML += txt.charAt(i);
         i++;
         setTimeout(typeWriter, speed);
      }
  }

var i = 0;
   
  var speed = 100;

var txt = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";

typeWriter();
Check the demo here

    4 replies

    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • August 29, 2020

    Use the code given here

    Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
    B
    Forum|alt.badge.img
    • b_stb
    • Author
    • August 29, 2020

    Hello, 
    Thank you very much for your response.
    When you paste the code into the HTML part of the question, it also displays the "Click me" button.
    I'm really bad in coding, so I don't know how to make the text appear automatically without the "Click me" button and without the word "Typewriter".
    Do you know how to do that? 
    Thanks again.

    rondev
    Level 6 ●●●●●●
    Forum|alt.badge.img+22
    • rondev
    • Level 6 ●●●●●●
    • Answer
    • August 29, 2020

    Paste the below code in the HTML view of the question

     
    Paste the below code in the onReady function of the javascript:

    function typeWriter() {
          if (i < txt.length) {
             document.getElementById("demo").innerHTML += txt.charAt(i);
             i++;
             setTimeout(typeWriter, speed);
          }
      }

    var i = 0;
       
      var speed = 100;

    var txt = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";

    typeWriter();
    Check the demo here

    Ron Dev (DM for any request. XM Technology Consultant, surveysolution.in)
      B
      Forum|alt.badge.img
      • b_stb
      • Author
      • August 29, 2020

      https://www.qualtrics.com/community/discussion/comment/29726#Comment_29726Thank you very much !!

      Terms & ConditionsAccessibility statement