clippy.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/smore-inc/clippy.js/master/build/clippy.css'>
<link rel="stylesheet prefetch" href="https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=b0fb54f66683">
<script src='https://cdn.rawgit.com/smore-inc/clippy.js/master/build/clippy.min.js'></script>
<div id="post-editor" class="post-editor js-post-editor">
    <div style="position: relative;">
        <div class="wmd-container">
            <div id="wmd-button-bar" class="wmd-button-bar"><ul id="wmd-button-row" class="wmd-button-row"><li class="wmd-button" id="wmd-bold-button" title="Strong <strong> Ctrl+B" style="left: 0px;"><span style="background-position: 0px 0px;"></span></li><li class="wmd-button" id="wmd-italic-button" title="Emphasis <em> Ctrl+I" style="left: 25px;"><span style="background-position: -20px 0px;"></span></li><li class="wmd-spacer wmd-spacer1" id="wmd-spacer1"></li><li class="wmd-button" id="wmd-link-button" title="Hyperlink <a> Ctrl+L" style="left: 75px;"><span style="background-position: -40px 0px;"></span></li><li class="wmd-button" id="wmd-quote-button" title="Blockquote <blockquote> Ctrl+Q" style="left: 100px;"><span style="background-position: -60px 0px;"></span></li><li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K" style="left: 125px;"><span style="background-position: -80px 0px;"></span></li><li class="wmd-button" id="wmd-image-button" title="Image <img> Ctrl+G" style="left: 150px;"><span style="background-position: -100px 0px;"></span></li><li class="wmd-button wmd-snippet-button" style="left:175px" id="wmd-snippet-button" title="JavaScript/HTML/CSS snippet Ctrl-M"><span style="background-image: url(&quot;/content/Shared/balsamiq/wmd-mockup-button.png&quot;);"></span></li><li class="wmd-spacer wmd-spacer2" id="wmd-spacer2" style="left: 220px;"></li><li class="wmd-button" id="wmd-olist-button" title="Numbered List <ol> Ctrl+O" style="left: 225px;"><span style="background-position: -120px 0px;"></span></li><li class="wmd-button" id="wmd-ulist-button" title="Bulleted List <ul> Ctrl+U" style="left: 250px;"><span style="background-position: -140px 0px;"></span></li><li class="wmd-button" id="wmd-heading-button" title="Heading <h1>/<h2> Ctrl+H" style="left: 275px;"><span style="background-position: -160px 0px;"></span></li><li class="wmd-button" id="wmd-hr-button" title="Horizontal Rule <hr> Ctrl+R" style="left: 300px;"><span style="background-position: -180px 0px;"></span></li><li class="wmd-spacer wmd-spacer3" id="wmd-spacer3" style="left: 346px;"></li><li class="wmd-button" id="wmd-undo-button" title="Undo - Ctrl+Z" style="left: 350px;"><span style="background-position: -200px -20px;"></span></li><li class="wmd-button" id="wmd-redo-button" title="Redo - Ctrl+Y" style="left: 375px;"><span style="background-position: -220px -20px;"></span></li><li class="wmd-button wmd-help-button" id="wmd-help-button" title="Markdown Editing Help" style="right: 0px;"><span style="background-position: -240px 0px;"></span></li></ul></div>
            <textarea id="wmd-input" class="wmd-input processed" name="post-text" cols="92" rows="15" tabindex="101" data-min-length=""></textarea>
        <div class="grippie" style="margin-right: 0px;"></div></div>
    </div>
    <div class="fl" style="margin-top: 8px; height:24px;">&nbsp;</div>
    <div id="draft-saved" class="draft-saved community-option fl" style="margin-top: 8px; height:24px; display:none;">draft saved</div>
    <div id="draft-discarded" class="draft-discarded community-option fl" style="margin-top: 8px; height:24px; display:none;">draft discarded</div>
    <div class="community-option g-row ai-center f-checkbox">
        <div class="g-col -input">
            <input id="communitymode" name="communitymode" type="checkbox">
        </div>
        <div class="g-col">
            <label for="communitymode" class="f-label _small" title="Marking an answer community wiki encourages others to edit it by lowering the reputation barrier required to edit. However, you will not gain any upvote reputation from it. This cannot be undone.">community wiki</label>
        </div>
    </div>
</div>

clippy.js

$(document).ready(function(){
  $('.wmd-input').one('focus',function() {
    clippy.load('Clippy', function (agent) {
      var animations = agent.animations();
      $('.js-states').text(animations.join(' '));
      agent.show();
      agent.moveTo(400, 30);
      agent.speak('Hello, I see you\'re trying to ask a question. My name is Clippy and I\'d be happy to help.');
      agent.speak("Please provide a clear description of the problem you're encountering");
      agent._addToQueue(function(complete) {
          $('.wmd-input').val("I'm trying to see if `y` equals 10 but it gives an error");
          complete();
      });
      agent.gestureAt(-100,50);
      agent.speak('If your code does not work, please include the exact error message you\'re getting.');
      
      agent._addToQueue(function(complete) {
          $('.wmd-input').val("I'm trying to see if `y` equals 10 but it gives an error\n\nMain.java:13: error: incompatible types: int cannot be converted to boolean");
          
          complete();
      });
      agent.moveTo(550, 70);
      agent.gestureAt(-100,50);
      agent._addToQueue(function(complete) {
          $('.wmd-input').val("I'm trying to see if `y` equals 10 but it gives an error\n\nMain.java:13: error: incompatible types: int cannot be converted to boolean\n\n	public static void main (String[] args) throws java.lang.Exception\n	{\n	    int y = 5;\n	    if(y = 10) {\n	    }\n	\n     }");
          complete();
      });
      agent.speak('Also, when you include code, don\'t forget to add four spaces before each line so it will be formatted as code.');
      
      agent.moveTo(50, 120);
      agent.gestureAt(-100,50);
      
      agent.moveTo(90,50);
      agent.gestureAt(0,-50);
      agent.speak('You can also select your code and then hit the "format as code" button');
      agent.speak("A thanks, \"thank you\", is not necessary to end your post with.");
      agent.moveTo(630, 200);
      agent.speak("So, now you can start on your own question. For that we have a couple of questions to you that you can fill out");
      agent._addToQueue(function(complete) {
           $('.wmd-input').val("# What are you trying to achieve?");
          complete();
      });
      agent.moveTo(400, 30);
      agent.gestureAt(-100, 50);
      agent.speak("Please describe in short what you are trying to achieve");
      agent._addToQueue(function(complete) {
           $('.wmd-input').val("# What are you trying to achieve?\n\n# What is the problem you're facing?");
          complete();
      });
      agent.moveTo(400, 70);
      agent.gestureAt(-100, 50);
      agent.speak("Please describe the error you're getting, and/or post the error message you're getting");
      agent._addToQueue(function(complete) {
           $('.wmd-input').val("# What are you trying to achieve?\n\n# What is the problem you're facing?\n\n#Show the code causing the problem");
          complete();
      });
      agent.moveTo(400, 90);
      agent.gestureAt(-100, 50);
      agent.speak("Please post the code that causes your problem. Try to post it without clutter or unrelated code.");
      
      agent.speak("People who answer should be able to use your code to reproduce the error. Please lookup MVCE in the stack overflow help .");
      agent.moveTo(630, 200);
    });
  });
});