network-editor/index.html at master · CSNLab/network-editor · 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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta charset="UTF-8">
        <title>Experiment</title>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
    </head>

    <!-- CSS -->
    <style type="text/css">
        #info-form {
            position: absolute;
            width: 20%;
            top: 35%;
            left: 40%;
        }
        .submit-btn {
            display: table;
            margin: auto;
        }
        #section-group .radio {
            margin-left: 5px;
        }
        #instr {
            margin: auto;
            width: 270px;
            margin-top: 30vh;
        }
    </style>

    <!-- HTML -->
    <body>
        <div id="info">
            <div id="info-form" class="survey" data-toggle="validator" role="form">
                <form action="javascript:signin();" class="form-horizontal">
                    <div id="user-id-group" class="form-group">
                        <label id="user-id-text" class="control-label" for="user-id">ID</label>
                        <input id="user-id" type="text" class="form-control input-md" required>
                    </div>
                    <div id="section-group" class="form-group">
                        <label id="user-id-text" class="control-label">Section</label>
                        <div class="row">
                            <div class="radio col-auto">
                                <input name="section" type="radio" value="1" required> 1
                            </div>
                            <div class="radio col">
                                <input name="section" type="radio" value="2"> 2
                            </div>
                        </div>
                    </div>
                    <button id="submit" type="submit" class="btn btn-primary submit-btn">Submit</button>
                </form>
            </div>
        </div>

        <div id="instr">
            <p id="instr-text"></p>
            <button id="start" class="btn btn-primary submit-btn">Start</button>
        </div>

        <!-- JavaScript -->
        <script>
            var instrText = [
                'On the next page, you will see the images of people again. Your job is to reconstruct the social network you\'ve learned about -- just draw a connection between any two people who are friends.',
                'On the next page, you will see the images of airports again. Your job is to reconstruct the flight network you\'ve learned about -- just draw a connection between any two airports that are connected by a direct flight.'
            ];
            var userId, sectionId;
            $('#instr').hide();
            function signin() {
                $('#user-id').removeClass('is-invalid');
                userId = $('#user-id').val();
                sectionId = $("input[name='section']:checked").val();
                if (!userId.startsWith('ucla') || isNaN(userId.substring(4))) {  // error checking
                    $('#user-id').addClass('is-invalid');
                    return;
                }
                $('#instr-text').text(instrText[parseInt(userId.substring(4)) % 2]);
                $('#info').hide();
                $('#instr').show();
            }
            $('#start').click(function() {
                window.location.href = 'editor.html?id=' + userId + '&section=' + sectionId;
            });
        </script>
    </body>
</html>