動き的には、こんな感じですかね?
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8">
5 <title>タイトル</title>
6</head>
7<body>
8<div id="textarea1">
9 <textarea></textarea>
10</div>
11<div id="textarea2">
12 <p><span id="text">./a.out</span>と入力しましょう。</p>
13</div>
14<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
15<script>
16 $("#textarea1 textarea").change(function () {
17 if ($(this).val() == $("#text").text()) {
18 $("#textarea2 p").html('次は、<span id="text">text</span>と入力しましょう');
19 }
20 }).change();
21</script>
22</body>
23</html>
決められたコマンドというのが2つ以上あるならこんな感じにすればいいんじゃないでしょうか。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8">
5 <title>タイトル</title>
6</head>
7<body>
8<div id="textarea1">
9 <textarea></textarea>
10</div>
11<div id="textarea2">
12 <p><span id="text">./a.out</span>と入力しましょう。</p>
13</div>
14<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
15<script>
16 var i = 0, commands = [
17 'text',
18 'text1',
19 'text2',
20 'text3'
21 ];
22 $("#textarea1 textarea").change(function () {
23 if ($(this).val() == $("#text").text()) {
24 $("#textarea2 p").html('次は、<span id="text">' + commands[i] + '</span>と入力しましょう');
25 i++;
26 }
27 }).change();
28</script>
29</body>
30</html>
わからないところとかあったらコメントとかでおしえてください。
補足
説明を入れたいときも、上でやっていることを参考にすると簡単に実現できます。
今回はtextarea2に新しくspan.introを追加してそこに説明を表示させています。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8">
5 <title>タイトル</title>
6</head>
7<body>
8<div id="textarea1">
9 <textarea></textarea>
10</div>
11<div id="textarea2">
12 <p><span id="text">./a.out</span>と入力しましょう。</p>
13 <span id="intro"></span>
14</div>
15<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
16<script>
17 var i = 0, commands = [
18 'text',
19 'text1',
20 'text2',
21 'text3'
22 ];
23 var intro = [
24 "textの説明",
25 "text1の説明",
26 "text2の説明",
27 "text3の説明"
28 ];
29 $("#textarea1 textarea").change(function () {
30 if ($(this).val() == $("#text").text()) {
31 $("#textarea2 p").html('次は、<span id="text">' + commands[i] + '</span>と入力しましょう<br>');
32 $("#intro").html(commands[i] + 'の説明: ' + intro[i]);
33 i++;
34 }
35 }).change();
36</script>
37</body>
38</html>
補足の補足
直近で打ち込まれた文字を認識するにはlastIndexOfメソッドを使用すると実現できます。
HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="utf-8">
5 <title>タイトル</title>
6</head>
7<body>
8<div id="textarea1">
9 <textarea></textarea>
10</div>
11<div id="textarea2">
12 <p><span id="text">./a.out</span>と入力しましょう。</p>
13 <span id="intro"></span>
14</div>
15<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
16<script>
17 var i = 0, commands = [
18 'text',
19 'text1',
20 'text2',
21 'text3'
22 ];
23 var intro = [
24 "textの説明",
25 "text1の説明",
26 "text2の説明",
27 "text3の説明"
28 ];
29 $("#textarea1 textarea").keypress(function () {
30 var lastLine = (this.value).substr((this.value).lastIndexOf("\n") + 1);
31 if (lastLine == $("#text").text()) {
32 $("#textarea2 p").html('次は、<span id="text">' + commands[i] + '</span>と入力しましょう<br>');
33 $("#intro").html(commands[i] + 'の説明: ' + intro[i]);
34 i++;
35 }
36 }).change();
37</script>
38</body>
39</html>