QuizScraperFrontend/index.html at master · QuizScraper/QuizScraperFrontend · 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
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">

  <head id="header">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>QuizScraper</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="./src/css/quizscraper.css" />

    <!--[if lt IE 9]>
      <script>
      (function(){
        var ef = function(){};
        window.console = window.console || {log:ef,warn:ef,error:ef,dir:ef};
      }());
      </script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-shim.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/3.4.0/es5-sham.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>
    <div id="root"></div>

    <!-- jQuery  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <!-- Built by Webpack -->
    <script src="quizscraper.js"></script>

    <script>
    function displayQuestions(json, topic){
      var questionsHTML = '<h2>' + topic + ':</h2> <br /> ';
      var results = JSON.stringify(json);
      for(var i = 0; i < results.length; i++){
        questionsHTML = questionsHTML + '<li>' + results[i].question + ' | answer: ' + results[i].answer + '</li> ';
      }
      document.getElementById('topic-container').innerHTML =  questionsHTML;
    }

      function populateQuestions(topic){
        document.getElementById('search-suggest').innerHTML =  '';
        //console.log(topic);

        var questionScript = '';
        if((topic != '') && (topic != ' ') && (topic != null)){
          if(questionScript != ''){
            document.body.removeChild(questionScript);
          }
          questionScript = document.createElement('script');
          questionScript.src = 'http://localhost:5000/p/'+ topic;
          document.body.appendChild(questionScript);
          setTimeout(function(){displayQuestions(questionScript, topic); console.log(questionScript);},1000);
          setTimeout(function(){displayQuestions(questionScript, topic); console.log(questionScript);},10000);
          setTimeout(function(){displayQuestions(questionScript, topic); console.log(questionScript);},40000);
          setTimeout(function(){displayQuestions(questionScript, topic); console.log(questionScript);},60000);
          setTimeout(function(){displayQuestions(questionScript, topic); console.log(questionScript);},100000);
          setTimeout(function(){displayQuestions(questionScript, topic); console.log(questionScript);},120000);
          setTimeout(function(){displayQuestions(questionScript, topic); console.log(questionScript);},150000);
          setTimeout(function(){displayQuestions(questionScript, topic); console.log(questionScript);},200000);
        }else{
          document.getElementById('topic-container').innerHTML =  '';
        }
      }

      function parseSearchJSON(json){
        //console.log(json);
        var resultsHTML = ' ';
        var suggestion_arr = json[1];
        for(var i = 0; i < json.length; i++) {
            var suggestion_val = suggestion_arr[i];
            var suggestion_url = json[3][i];
            var article_name = suggestion_url.split('/')[suggestion_url.split('/').length-1];

            resultsHTML = resultsHTML + '<button onclick="populateQuestions(\'' + article_name + '\')" type="button" class="list-group-item">' + suggestion_val + '</button>';
        }
        return resultsHTML;
      }

      function displaySuggestions(json){
        var results = parseSearchJSON(json);
        if((json[1][0] !== 'undefined') && (results.indexOf('undefined') == -1)){
          document.getElementById('search-suggest').innerHTML =  results;
        }else{
          document.getElementById('search-suggest').innerHTML =  '';
        }
      }

      var autofillScript = '';

      document.getElementById('searchfield').onkeyup = function(){
        var entry = document.getElementById('searchfield').value;

        if((entry != '') && (entry != ' ') && (entry != null)){
          if(autofillScript != ''){
            document.body.removeChild(autofillScript);
          }
          autofillScript = document.createElement('script');
          autofillScript.src = 'https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&format=json&callback=displaySuggestions&search='+ entry;
          document.body.appendChild(autofillScript);
        }else{
          document.getElementById('search-suggest').innerHTML = '';
        }
      };
    </script>

  </body>

</html>