resultsDetail.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Who's News - Results</title>
    <!--Stylesheets-->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/w3.css">
    <!--Fonts-->
    <!--Google Fonts - Roboto -->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type='text/css'>
    <!-- Font AWESOME for icons https://fortawesome.github.io/Font-Awesome/-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
    <link rel='shortcut icon' href='extension/NewsBias.png' type='image/x-icon' />
    <!-- SHare This http://tools.sharethis.com/get-sharing-tools/# -->
    <script type="text/javascript">
        var switchTo5x = true;
    </script>
    <script type="text/javascript" id="st_insights_js" src="https://ws.sharethis.com/button/buttons.js?publisher=32d8982a-2e24-4dfe-a167-ab796bd890f8-10exp-Y"></script>
    <script type="text/javascript">
        stLight.options({
            publisher: "32d8982a-2e24-4dfe-a167-ab796bd890f8-10exp-Y"
            , doNotHash: false
            , doNotCopy: false
            , hashAddressBar: false
        });
    </script>
</head>

<body ng-app="myApp" ng-controller="newsBias">
    <!-- Navbar -->
    <nav>
        <ul class="w3-navbar navy w3-card-2 w3-top w3-left-align w3-large">
            <li class="w3-hide-medium w3-hide-large w3-opennav w3-right"> <a class="w3-padding-large w3-hover-white w3-large navy" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a> </li>
            <li>
                <a href="#" class="navLogoContainer" id="nohover"><img class="navLogo" src="IMG/NewsBias.png" alt="News Bias Logo" /></a>
            </li>
            <li class="w3-hide-small"><a href="index.html" class="w3-padding-large w3-hover-white">Home</a></li>
            <li class="w3-hide-small w3-dropdown-hover"><a href="factcheck.html" class="w3-padding-large w3-hover-white active-tab">Fact Check <i class="fa fa-caret-down"></i></a>
                <div class="w3-dropdown-content w3-white w3-card-4"> <a href="results.html">View all results</a> <a href="submit.html">Submit an article</a> <a href="apply.html">Apply to be a fact checker</a> </div>
            </li>
            <li class="w3-hide-small"><a href="about.html" class="w3-padding-large w3-hover-white">About</a></li>
            <li class="w3-hide-small w3-right w3-dropdown-hover"><a class="w3-padding-large w3-hover-white" href="dashboard.html">My Dashboard <i class="fa fa-tachometer" aria-hidden="true"></i></a>
                <div class="w3-dropdown-content w3-white w3-card-4"> <a href="login.html">Login <i class="fa fa-sign-in" aria-hidden="true"></i></a> <a href="index.html">Logout <i class="fa fa-sign-out" aria-hidden="true"></i></a> </div>
            </li>
        </ul>
    </nav>
    <!-- Navbar on small screens -->
    <div id="navDemo" class="w3-hide w3-hide-large w3-hide-medium w3-top" style="margin-top:51px">
        <ul class="w3-navbar w3-left-align w3-large navy">
            <li><a class="w3-padding-large" href="index.html">Home</a></li>
            <li><a class="w3-padding-large" href="factcheck.html">Fact Check</a></li>
            <li><a class="w3-padding-large" href="results.html">View all results</a></li>
            <li><a class="w3-padding-large" href="submit.html">Submit an article</a></li>
            <li><a class="w3-padding-large" href="apply.html">Apply to be a fact checker</a></li>
            <li><a class="w3-padding-large" href="about.html">About</a></li>
            <li><a class="w3-padding-large" href="dashboard.html">My Dashboard</a></li>
            <li><a class="w3-padding-large" href="login.html">Login</a></li>
        </ul>
    </div>
    <!-- Header -->
    <div class="w3-container w3-section white w3-center">
        <h1>Fact Check Detailed Results</h1> </div>
    <div class="w3-container">
        <p class="w3-small w3-padding-bottom"><a href="factcheck.html">Fact Check</a> > <a href="results.html">Results</a> > Detailed Results</p>
    </div>
    <div class="w3-container w3-padding-top-32 w3-margin-bottom">
        <div class="w3-padding-medium" ng-repeat="detail in results" ng-show="detail.score == 'C'">
            <div class="w3-card-4">
                <div class="w3-container w3-cyan w3-text-white w3-padding">
                    <h2 class="w3-xlarge"><a target="_blank" ng-href={{detail.url}}>{{detail.name}}</a></h2>
                    <p class="w3-right">By {{detail.author}}</p>
                </div>
                <div class="w3-container w3-padding">
                    <p>Publication: {{detail.publication}}. Publication Owner: {{detail.owner}}</p>
                    <hr>
                    <h3>Results</h3>
                    <ul class="searchResult w3-margin-bottom">
                        <li class="w3-padding-8">Is the content factually correct? <span class="w3-right w3-xlarge">{{ detail.a1 }}/5</span></li>
                        <li class="w3-padding-8">Have all aspects been presented In a reasonable, even and balanced manner?<span class="w3-right w3-xlarge">{{ detail.a2 }}/5</span></li>
                        <li class="w3-padding-8">Is the headline refelctive of the article's content? Does it exaggerate elements that are not central to the issue or focus of the article?<span class="w3-right w3-xlarge">{{ detail.a3 }}/4</span></li>
                        <li class="w3-padding-8">How sensational is the tone? Are "loaded" words used?<span class="w3-right w3-xlarge">{{ detail.a4 }}/5</span></li>
                    </ul>
                    <h4 class="w3-right w3-padding-8">TOTAl score: {{detail.total}}/{{detail.totalpos}}</h4> <span class='st_facebook_large' displayText='Facebook'></span> <span class='st_twitter_large' displayText='Tweet'></span> <span class='st_linkedin_large' displayText='LinkedIn'></span>
                    <!--<button class="w3-btn-floating-large w3-border w3-right {{detail.color}}">{{detail.grade}}</button>-->
                </div>
                <!--<button class="w3-btn-block {{detail.color}}"><h5>{{detail.grade}}</h5></button>-->
                <footer class="w3-container {{detail.color}} w3-padding-16 w3-center">
                    <h5 class="w3-xxxlarge">{{detail.score}}</h5> </footer>
            </div>
        </div>
    </div>
    <div class="w3-row-padding w3-light-grey w3-padding-24 w3-container">
        <div class="w3-content text-navy">
            <h2>About the fact checking process</h2>
            <h3>What are the four criteria that will be used?</h3>
            <ul class="searchResult">
                <li>Is the content factually correct?</li>
                <li>Have all aspects been presented In a reasonable, even and balanced manner?</li>
                <li>Is the headline refelctive of the article's content? Does it exaggerate elements that are not central to the issue or focus of the article?</li>
                <li>How sensational is the tone? Are "loaded" words used?</li>
            </ul>
            <h3>What are the grade cutoffs</h3>
            <ul class="searchResult">
                <li>A : 95% or greater</li>
                <li>B : 80-94%</li>
                <li>C : 68-79%</li>
                <li>D : 55-67%</li>
                <li>F : Less than 54%</li>
            </ul>
            <h3>What categories of news will be checked?</h3>
            <p>Business, Current Events, Education, Health, Politics, Science / Environment </p>
            <h3>What categories won't be assessed?
</h3>
            <p>Cars, Entertainment, Lifestyle, Local, Property, Religion / Spirituality, Sports, Technology, Travel, Weather </p>
        </div>
    </div>
    <!-- Footer -->
    <footer class="w3-container w3-padding-32 w3-center navy">
        <p>Copyright 2016 Team News Bias</p>
    </footer>
    <script>
        // Used to toggle the menu on small screens when clicking on the menu button
        function myFunction() {
            var x = document.getElementById("navDemo");
            if (x.className.indexOf("w3-show") == -1) {
                x.className += " w3-show";
            }
            else {
                x.className = x.className.replace(" w3-show", "");
            }
        }
    </script>
    <!-- jQuery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
    <!-- AngularJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
    <!--controllers -->
    <script src="js/controller.js"></script>
    <!--Angular slider from https://github.com/angular-slider/angularjs-slider-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/5.4.0/rzslider.min.js"></script>
</body>

</html>