DrawRacket4Me/start.html at master · AnnieZhou08/DrawRacket4Me · 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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<style>
</style>

<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>

  <body style = "text-align: center">

    <a href = "start.html"><img id = "logo" src = "images/logo2.png" width = 400px style="margin-top: 15%; opacity: 0;"></a><br>

    <p id="instruction" style="opacity:0; font-size: 30px; color: #CBCACA" position= absolute>What do you want me to draw?</p>
    <table style="width: 50%; margin-left: auto; margin-right: auto; opacity:0; text-align: center;">
      <tr>
        <td><input type="radio" name="answer" id="list" value="list" style="width:30px; height:30px;"></td>
        <td style="text-align: left">N-Children Trees</td>
        <td><input type="radio" name="answer" id = "binary" value = "binary" style="width:30px; height:30px;"></td>
        <td style="text-align: left">Binary Trees</td>
        <td><input type="radio" name="answer" id = "graph" value = "graph" style="width:30px; height:30px;"></td>
        <td style="text-align: left">Graphs</td>
      </tr>
    </table> <br><br><br><br>
    <a href="#"> <img id = "continue" src="images/continue.png" width = 150px style="opacity:0;"></a> <br>
    <p id= "identity" style="font-size: 30px; opacity:0;" position = "relative">Identifier Name:</p>
    <p id = "identitiy">
    <input id = "identifier" type = "text" name = "firstname" placeholder="e.g. node, tree" style="font-size:30px; opacity:0;">
    </p>
    <textarea id = "code" rows = "18" cols = "63" placeholder="enter your tree/graph here..." style="opacity: 0"></textarea>
  </body>


</html>

<script>
  window.onload = function start (){
    $("#logo").fadeTo(1250, 1, startAnimation);

    var list = document.getElementById("list");
    var binary = document.getElementById("binary");
    var graph = document.getElementById("graph");
    setInterval(function(){
       if(list.checked || binary.checked || graph.checked){
          $("#continue").fadeTo(800, 1);
        }
    },300)

    $("#continue").click(function (){
      $("#instruction").fadeTo(1000,0);
      $("table").fadeTo(1000,0, function() {
        if(graph.checked){
          $("#code").css("position","relative").animate({top:'-490px', left:'0px'},"fast", function(){
          $("#code").fadeTo(800, 1, function(){
            $("#continue").click(function (){
              var code = document.getElementById("code").value;
              console.log(code);
              sessionStorage.myType="graph";
              sessionStorage.myCode = code;
              window.open("draw.html", '_blank');
              window.close();
            })
          });
          });
        }else if(binary.checked || list.checked){
          $("#identity").css("position","relative").animate({top:'-270px', left:'0px'},"fast");
          $("#identifier").css("position","relative").animate({top:'-270px', left:'0px'}, "fast", function(){
            $("#identity").fadeTo(800,1);
            $("#identifier").fadeTo(800,1);
          });
          $("#continue").click(function (){
            $("#continue").fadeTo(10,1);
            console.log("asdf");
            $("#identity").fadeTo(100,0);
            $("#identifier").fadeTo(100,0, function(){
              $("#code").css("position","relative").animate({top:'-490px'},"fast", function(){
              $("#code").fadeTo(800, 1, function(){
                $("#continue").click(function (){
                   var identifier = document.getElementById("identifier").value;
                   var code = document.getElementById("code").value;
                   console.log(identifier);
                   console.log(code);
                  if(list.checked){
                    sessionStorage.myType = "list";
                  }else{
                    sessionStorage.myType = "binary";
                  }
                  sessionStorage.myIdentifier = identifier;
                  sessionStorage.myCode = code;
                  window.open("draw.html", '_blank');
                  window.close();
                });
              });
            });
            });
          })
        }
      });
    });
  }

  function startAnimation() {
    $("#logo").animate({width: '-=120px'});
    $("#instruction").fadeTo(1000,1, slideAnimation);
    $("table").fadeTo(1000, 1);
  }

  function slideAnimation() {
    $("#logo").css("position","relative").animate({top: '-120px'}, "slow"); $("#instruction").css("position","relative").animate({top:'-50px'}, "slow");
  }

</script>