bjc-r/cur/programming/python/parsons/hello_world.html at 28482e4fd32bd8c5c9d40015d8d600c28e0630be · cs10/bjc-r · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
    <head>
        <title>Writing your First Python Function</title>
        <script src="/bjc-r/llab/loader.js"></script>
        <link href="/bjc-r/js-parsons/parsons.css" rel="stylesheet" />
        <link href="/bjc-r/js-parsons/lib/prettify.css" rel="stylesheet" />
        <script src="/bjc-r/js-parsons/lib/prettify.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-176402054-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-176402054-1');
</script>
</head>
    <body>
        <h2>Exercise 0: Hello World</h2>
        <p>Let's write our first Python program! Drag and drop the code below to write a <code>hello_world</code> function that prints "Hello, World!"</p>

        <p>You may reorder the blocks as you wish, and drag them to indentation levels. Note that in Python, the indentation level matters, so be sure to match the indentation you saw in the sample function on the previous page! <strong>If you do not see code below, please refresh your page and it should show up.</strong></p>

        <div id="sortableTrash" class="sortable-code"></div>
        <div id="sortable" class="sortable-code">
        </div>
        <div style="clear:both;"></div>
        <p style="text-align: center">
            <a class="parsonsButton" href="#" id="feedbackLink">Get feedback</a>
            <a class="parsonsButton" class="parsonsButton" href="#" id="exportLink">Export</a>
        </p>
        <br>
        <p>Once you're done, you can click the "Feedback" button above to check for correctness, and the "Export" button if you'd like to download your code as a Python file.</p>
        <script src="/bjc-r/js-parsons/lib/jquery.min.js"></script>
        <script src="/bjc-r/js-parsons/lib/jquery-ui.min.js"></script>
        <script src="/bjc-r/js-parsons/lib/jquery.ui.touch-punch.min.js"></script>
        <script src="/bjc-r/js-parsons/lib/underscore-min.js"></script>
        <script src="/bjc-r/js-parsons/lib/lis.js"></script>
        <script src="/bjc-r/js-parsons/parsons.js"></script>
        <script>
            var initial = 'def hello_world():\n' +
                      '    print("Hello, World!")\n'

        function displayErrors(fb) {
            if(fb.errors.length > 0) {
                alert(fb.errors[0]);
            }
        }

        $$(document).ready(function(){
            var parson = new ParsonsWidget({
                'sortableId': 'sortable',
                'trashId': 'sortableTrash',
                'max_wrong_lines': 1,
                'feedback_cb' : displayErrors
            });
            parson.init(initial);
            parson.shuffleLines();
            $$("#newInstanceLink").click(function(event){
                event.preventDefault();
                parson.shuffleLines();
            });
            $$("#feedbackLink").click(function(event){
                event.preventDefault();
                parson.getFeedback("hello_world");
            });
            $$("#exportLink").click(function(event){
                event.preventDefault();
                parson.export("hello_world.py");
            });
        });
        </script>
    </body>
</html>