yE1g6Vhr

1//gotMessage() receives the API response and builds result.html based on it
2function gotMessage(message, sender, sendResponse) {
3    if(message.status != 200){
4        //Display error for the user
5        document.getElementById("content").style.display = "none";
6        document.getElementById("failed").style.display = "block";
7        $('#failReason').text(message.greeting.detail)
8        return;
9    }
10    let data = JSON.parse(message.greeting); //API response
11    let pred = prediction(data.credibility); //verified/stop
12    $('.verified-img').attr("src","images/"+pred+".png");
13    if(pred=="verified"){
14        $('.verified-txt').html("True");
15    }else{
16        $('.verified-txt').html("False");
17    }
18    let pic = ["stop","verified"];
19    let status = ["False", "True"];
20
21    //Build html page for article
22    if (message.type === "article") {
23        rank = data.claims
24        app.init()
25        let claimLen = 0;
26        for(var k = 0; k<rank.length;k++){
27            if(rank[k]["type"]== "claim"){
28                claimLen++;
29            }
30        }
31        $("#content").hide();
32        $("#article").show();
33        $('#article-statement').text(data.main_claim);
34        $('#num-sentences').text(rank.length);
35        $('#num-claims').text(claimLen);
36        $('#num-accuracy').text(data.accuracy);
37
38        $("#submitFeedback").click(function(){
39            sendFeedback(data.metadata["url"],"article", "")
40            $(this).prop('disabled', true);
41            $("#feedback-p1").show()
42        });
43        $("#toggleResult").click(function(){
44            $("#feedbackPage").hide()
45            $("#article").show()
46        });
47        //Update key article information
48        $("#source").html(data.metadata["source"]);
49        $("#authors").html(data.metadata["authors"]);
50        $("#publish-date").html(data.metadata["publish_date"]);
51        $("#article-header").html(data.metadata["title"]);
52    }
53
54    //Build html page for marked text
55    else if (message.type === "text") {
56        $("#content").hide();
57        $("#marked").show();
58        $('#marked-statement').text(data.claim);
59
60        $("#toggleResult").click(function(){
61            $("#feedbackPage").hide()
62            $("#marked").show()
63        });
64
65        $("#submitFeedback").click(function(){
66            sendFeedback(data.claim,"marked", "")
67            $(this).prop('disabled', true);
68            $("#feedback-p1").show()
69        });
70    }
71
72    else if(message.type == "manual"){
73        console.log("Manual analysis")
74        $("#content").hide();
75        $("#marked").show();
76        $('#marked-statement').text(data.claim);
77        if(data.speaker != false){
78            $('#speaker').text(data.speaker);
79        }
80        $("#toggleResult").click(function(){
81            $("#feedbackPage").hide()
82            $("#marked").show()
83        });
84        $("#submitFeedback").click(function(){
85            sendFeedback(data.claim,"manual", data.speaker)
86            $(this).prop('disabled', true);
87            $("#feedback-p1").show()
88        });
89        $("#toggleResult").click(function(){
90            $("#feedbackPage").hide()
91            $("#marked").show()
92        });
93    }
94
95    //Append every evidence as a list item
96    var evidence = $('.evidence');
97    for (var i = 0; i < data.search_results.length; i++) {
98        evidence.append(`<div class="list-group">
99        <a target="_blank" rel="noopener noreferrer" href="`+ data.search_results[i]["link"] + `"
100            class="list-group-item lgi list-group-item-action flex-column align-items-start">
101            <div class="col-2 lg text-center align-middle">
102                <img src="images/`+pic[data.credibility[i]]+`.png" alt="verified">
103                <p>`+status[data.credibility[i]]+`</p>
104            </div>
105            <div class="col-9 lg align-middle">
106                <div class="d-flex w-100 justify-content-between">
107                    <h5 class="mb-1">`+ data.search_results[i]["title"]+ `</h5>
108                </div>
109                <p class="mb-1">`+ data.search_results[i]["body"] + `</p>
110                <small>
111                `+ data.search_results[i]["displayLink"] + `</small>
112            </div>
113        </a>
114    </div>`)
115    }
116}