← Back to branch summary

~azzar1/unity/add-show-desktop-key

« back to all changes in this revision

Viewing changes to ivle/webapp/console/help.html

  • Committer: William Grant
  • Date: 2010-02-23 06:11:58 UTC
  • Revision ID: grantw@unimelb.edu.au-20100223061158-05cqg88387ymjtlj
https://launchpad.net/bugs/526228
Redo console CSS, and replace the examples on the help page with something more like the modern console that also doesn't break the real console with ID conflicts.

Show diffs side-by-side

added added

removed removed

Lines of Context:
ivle/webapp/console/help.html
5
5
<h3>Entering Python code</h3>
6
6
<p>Using the console is fairly straightforward. Enter any valid Python code into the input text box located just to the right of the prompt (<code>&gt;&gt;&gt;</code>) at the bottom of the screen. When the line is complete, press ENTER to execute the code.</p>
7
7
 
8
 
<div class="example" style="border: solid 1px black; padding: 0.5em">
9
 
    <label id="console_prompt">&gt;&gt;&gt;&nbsp;</label>
10
 
    <input id="console_inputText"
11
 
     type="text" size="80" value="print 'Hello, world!'" readonly="readonly" />
12
 
    <input type='button' value='Interrupt' disabled="disabled" />
13
 
    <input type='button' value='Clear Output' disabled="disabled" />
 
8
<div class="console_help_example">
 
9
  <div class="console_heading">
 
10
    Python Console (example)
 
11
  </div>
 
12
  <div class="console_help_example_body">
 
13
    <div class="console_input" style="padding-top: 0.5em">
 
14
      <div>
 
15
        <div>
 
16
          <label class="console_prompt">&gt;&gt;&gt; </label>
 
17
        </div>
 
18
        <div class="console_inputCell">
 
19
          <input type="text" value="print 'Hello, world!'" class="console_inputText" disabled="disabled" />
 
20
        </div>
 
21
        <div>
 
22
          <input type="button" value="Interrupt" disabled="disabled" />
 
23
          <input type="button" value="Clear Output" disabled="disabled" />
 
24
          <input type="button" value="Reset" disabled="disabled" />
 
25
        </div>
 
26
      </div>
 
27
    </div>
 
28
  </div>
14
29
</div>
15
30
 
16
31
<p>Sometimes Python may expect additional lines of input - for example, after the <code>if</code> or <code>for</code> statements. This condition is indicated by a <code>...</code> prompt next to the input. Complete the command by entering additional lines as required. Press ENTER with an empty line to mark the code block as complete and execute it.</p>
20
35
<p>Please note that the console will time out after a period of inactivity. This has a similar result (and thus similar ramifications) to <a href="#restarting">restarting the console manually</a>.</p>
21
36
 
22
37
<h3>Interpreting output</h3>
23
 
<div class="example">
24
 
    <div id="console_body">
25
 
        <div style="background-color: gray; border: 2px solid black; padding:       
26
 
        2px; color: black; font-family: monospace; font-weight: bold;">Python 
27
 
        Console</div>
28
 
    </div>
29
 
    <div style="overflow-y: scroll; margin: 0.5em">
30
 
        <code>
 
38
<div class="console_help_example">
 
39
  <div class="console_heading">
 
40
    Python Console (example)
 
41
  </div>
 
42
  <div class="console_help_example_body">
 
43
    <div class="console_output">
 
44
      <code>
31
45
        <span style="color:#800">&gt;&gt;&gt;</span>
32
46
        <span style="color:gray">i</span><br/>
33
47
        <span style="color:red">name 'i' is not defined</span><br/>
36
50
        <span style="color:#800">&gt;&gt;&gt; </span>
37
51
        <span style="color:gray">print i</span><br/>
38
52
        2
39
 
        </code>
40
 
    </div>
41
 
    <div id="console_inputArea">
42
 
        <label id="console_prompt_2">&gt;&gt;&gt;&nbsp;</label>
43
 
        <input id="console_inputText_2" type="text" size="80" value="print i+2" 
44
 
        readonly="readonly" />
45
 
        <input type='button' value='Interrupt' disabled="disabled" />
46
 
        <input type='button' value='Clear Output' disabled="disabled" />
47
 
    </div>
 
53
      </code>
 
54
    </div>
 
55
    <div class="console_input">
 
56
      <div>
 
57
        <div>
 
58
          <label class="console_prompt">&gt;&gt;&gt; </label>
 
59
        </div>
 
60
        <div class="console_inputCell">
 
61
          <input type="text" class="console_inputText" disabled="disabled" />
 
62
        </div>
 
63
        <div>
 
64
          <input type="button" value="Interrupt" disabled="disabled" />
 
65
          <input type="button" value="Clear Output" disabled="disabled" />
 
66
          <input type="button" value="Reset" disabled="disabled" />
 
67
        </div>
 
68
      </div>
 
69
    </div>
 
70
  </div>
48
71
</div>
49
72
 
50
73
<p>Each line that you have entered - as well as any output produced - is shown in the text area above the input. Lines beginning with a normal prompt (<code style="color: #800">&gt;&gt;&gt;</code>) are your input lines, while lines in red (such as <code style="color: red">invalid syntax (&lt;input&gt;, line 1)</code>) are generated errors or exceptions. Other lines are normal output from your code.</p>