demo.html

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

<head>
  <meta charset="UTF-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width,initial-scale=1" name="viewport">
  <meta content="description" name="description">
  <meta name="google" content="notranslate" />
  <meta content="Mashup templates have been developped by Orson.io team" name="author">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">

  <!-- Disable tap highlight on IE -->
  <meta name="msapplication-tap-highlight" content="no">

  <link href='https://fonts.googleapis.com/css?family=Open Sans Condensed:300' rel='stylesheet'>
  <link href='https://fonts.googleapis.com/css?family=Antic' rel='stylesheet'>

  <title>Demo</title>
</head>

<script type='text/javascript'>
var data = []
window.onload = function() {
    var jsonObject = {"1a": {"text": "Get this fucking bullshit out of here you fucking Russian shills."}, "2a": {"text": "Get this fucking bullshit out of here you fucking Russian shills.", "title": "Kamala Harris has completely backtracked on supporting Medicare For All and is seemingly only able to run for president because her campaign is funded by billionaires. On this, Bernie had a few words:"}, "3a": {"text": "Get this fucking bullshit out of here you fucking Russian shills.", "title": "Kamala Harris has completely backtracked on supporting Medicare For All and is seemingly only able to run for president because her campaign is funded by billionaires. On this, Bernie had a few words:", "image": "https://i.redd.it/twai4fzfmnh31.jpg"}, "1b": {"text": "The guy is black. Anything over 10 cents is unreasonable. \n\n\nJokes reddit."}, "2b": {"text": "The guy is black. Anything over 10 cents is unreasonable. \n\n\nJokes reddit.", "title": "Guy refuses to pay for his computer repairs. Tries to start fight with shop owner and gets bear maced and literally Sparta kicked clean out of his shop!"}, "1c": {"text": "nigger"}, "2c": {"text": "nigger", "title": "I think a couple people could benefit from this."}, "3c": {"text": "nigger", "title": "I think a couple people could benefit from this.", "image": "https://i.redd.it/399f9l0twq121.jpg"}, "1d":  {"text": "No stuttering on my behalf. Easy to read what I said. Fat bitch needs to fix herself before starting shit with others."}, "2d":  {"text": "No stuttering on my behalf. Easy to read what I said. Fat bitch needs to fix herself before starting shit with others.", "title": "I almost feel bad for her"}, "3d": {"text": "No stuttering on my behalf. Easy to read what I said. Fat bitch needs to fix herself before starting shit with others.", "title": "I almost feel bad for her", "link": "https://www.reddit.com/r/instantkarma/comments/cgp7h0/acting_tough_and_kicking_a_car_with_someone_inside/"}, "4d": {"text": "No stuttering on my behalf. Easy to read what I said. Fat bitch needs to fix herself before starting shit with others.", "parent": "I mean... What?", "grandparent": "Only Once she gets her weight under control can she worry about what others are up to.", "title": "I almost feel bad for her", "link": "https://www.reddit.com/r/instantkarma/comments/cgp7h0/acting_tough_and_kicking_a_car_with_someone_inside/"}, "1e": {"text": "no there is no 'hard evidence' you dumb fuck lol\n\nyou dont know what the actual \n\n it was just eosteins grooming (also not pedophilac exactly but whatever) not someone else definitely not 'assasination', koolaid drinker"}, "2e": {"text": "no there is no 'hard evidence' you dumb fuck lol\n\nyou dont know what the actual \n\n it was just eosteins grooming (also not pedophilac exactly but whatever) not someone else definitely not 'assasination', koolaid drinker", "title": "This is our timeline."}, "3e": {"text": "no there is no 'hard evidence' you dumb fuck lol\n\nyou dont know what the actual \n\n it was just eosteins grooming (also not pedophilac exactly but whatever) not someone else definitely not 'assasination', koolaid drinker", "title": "This is our timeline.", "image": "https://i.redd.it/xv33z97xqag31.png"}, "1f": {"text": "Antifa aren't as bad as the radical right. This is a common false equivalency shared by people who are dishonest actors, and also people who are misinformed.\n\n&amp;#x200B;\n\nRight wing extremists have killed dozens,\n\nAntifa milkshaked a few dudes, and (wrongly) punched Andy Ngo.\n\nRead up more on Antifa as they're the ones actively fighting against the extremists such as the one who said this about Ocasio-Cortez\n\n&amp;#x200B;\n\n[https://www.youtube.com/watch?v=bgwS\\_FMZ3nQ](https://www.youtube.com/watch?v=bgwS_FMZ3nQ)"}, "2f": {"text": "Antifa aren't as bad as the radical right. This is a common false equivalency shared by people who are dishonest actors, and also people who are misinformed.\n\n&amp;#x200B;\n\nRight wing extremists have killed dozens,\n\nAntifa milkshaked a few dudes, and (wrongly) punched Andy Ngo.\n\nRead up more on Antifa as they're the ones actively fighting against the extremists such as the one who said this about Ocasio-Cortez\n\n&amp;#x200B;\n\n[https://www.youtube.com/watch?v=bgwS\\_FMZ3nQ](https://www.youtube.com/watch?v=bgwS_FMZ3nQ)", "title": "Police officer who said Ocasio-Cortez \"needs a round\" fired"}, "3f": {"text": "Antifa aren't as bad as the radical right. This is a common false equivalency shared by people who are dishonest actors, and also people who are misinformed.\n\n&amp;#x200B;\n\nRight wing extremists have killed dozens,\n\nAntifa milkshaked a few dudes, and (wrongly) punched Andy Ngo.\n\nRead up more on Antifa as they're the ones actively fighting against the extremists such as the one who said this about Ocasio-Cortez\n\n&amp;#x200B;\n\n[https://www.youtube.com/watch?v=bgwS\\_FMZ3nQ](https://www.youtube.com/watch?v=bgwS_FMZ3nQ)", "title": "Police officer who said Ocasio-Cortez \"needs a round\" fired", "link": "https://www.nola.com/news/crime_police/article_7c4edae6-acb8-11e9-80c4-2b2e15730e4f.html"},"4f": {"text": "Antifa aren't as bad as the radical right. This is a common false equivalency shared by people who are dishonest actors, and also people who are misinformed.\n\n&amp;#x200B;\n\nRight wing extremists have killed dozens,\n\nAntifa milkshaked a few dudes, and (wrongly) punched Andy Ngo.\n\nRead up more on Antifa as they're the ones actively fighting against the extremists such as the one who said this about Ocasio-Cortez\n\n&amp;#x200B;\n\n[https://www.youtube.com/watch?v=bgwS\\_FMZ3nQ](https://www.youtube.com/watch?v=bgwS_FMZ3nQ)", "parent": "Agreed on Antifa. Can you explain what the Democratic party, or half of them, are doing?", "grandparent": "This is all of Antifa and half of the Democratic party too, not just right wings.  Everyone is terrible.", "title": "Police officer who said Ocasio-Cortez \"needs a round\" fired", "link": "https://www.nola.com/news/crime_police/article_7c4edae6-acb8-11e9-80c4-2b2e15730e4f.html"}, "1g": {"text": "They should be charged with assault &amp; doing bodily harm to a minor"}, "2g": {"text": "They should be charged with assault &amp; doing bodily harm to a minor", "title": "Why would you be proud of this?"}, "3g": {"text": "They should be charged with assault &amp; doing bodily harm to a minor", "title": "Why would you be proud of this?", "image": "https://i.redd.it/nrsy1t24yw831.jpg"}, "1h": {"text": "shut up retard"}, "2h": {"text": "shut up retard", "title": "Found this posted in ironically on Reddit"}, "3h": {"text": "shut up retard", "title": "Found this posted in ironically on Reddit", "image": "https://i.redd.it/v1ri5noz4lh21.jpg"}, "4h": {"text": "shut up retard", "parent": "Please express your displeasure with things without using the r-word. It\u2019s so vile to use, but I know people don\u2019t mean harm. Just double check, please. ", "grandparent": "This has to be the most retarded thing I've ever seen on the entirety of the internet.", "title": "Found this posted in ironically on Reddit", "image": "https://i.redd.it/v1ri5noz4lh21.jpg"}, "1i": {"text": "Cunt"}, "2i": {"text": "Cunt", "title": "not the way to encourage kids to eat"}, "3i": {"text": "Cunt", "title": "not the way to encourage kids to eat", "image": "https://i.redd.it/89aupb4dny731.gif"}, "1j": {"text": "The MMA guys should be quiet. Nothing they do is any more effective in real world scenarios that involve weaponry, firearms, and multiple assailants. They'd still be fucked."}, "2j": {"text": "The MMA guys should be quiet. Nothing they do is any more effective in real world scenarios that involve weaponry, firearms, and multiple assailants. They'd still be fucked.", "title": "Sacred Wonders - BBC (2019) - The extraordinary final test to become a Shaolin Master (Preview)"}, "3j": {"text": "The MMA guys should be quiet. Nothing they do is any more effective in real world scenarios that involve weaponry, firearms, and multiple assailants. They'd still be fucked.", "title": "Sacred Wonders - BBC (2019) - The extraordinary final test to become a Shaolin Master (Preview)", "link": "https://www.youtube.com/watch?v=Zbow21FKJS4"}, "4j": {"text": "The MMA guys should be quiet. Nothing they do is any more effective in real world scenarios that involve weaponry, firearms, and multiple assailants. They'd still be fucked.", "parent": "MMA fighters all over the world have been nagging traditional martial arts for years. This criticism of their lack of practicality in real world scenarios is legitimate, but I recon that most of the people who practice traditional martial arts do so for their philosophy and \"art\" aspect.", "grandparent": "isnt there a growing group of asian MMA fighters who say kung fu is more like yoga than martial arts?", "title": "Sacred Wonders - BBC (2019) - The extraordinary final test to become a Shaolin Master (Preview)", "link": "https://www.youtube.com/watch?v=Zbow21FKJS4"}, "1k": {"text": "Fat people are gross"}, "2k": {"text": "Fat people are gross", "title": "One year difference."}, "3k": {"text": "Fat people are gross", "title": "One year difference.", "video": "https://i.imgur.com/9qW8kkS.mp4"}, "1l": {"text": "Islam is an actual mental disorder."}, "2l": {"text": "Islam is an actual mental disorder.", "title": "Saudi Arabia strips American mother of custody for being too Western"}, "3l": {"text": "Islam is an actual mental disorder.", "title": "Saudi Arabia strips American mother of custody for being too Western", "link": "https://www.cnn.com/videos/world/2019/08/16/saudi-arabia-custody-bethany-vierra-nick-watt-pkg-lead-vpx.cnn"}, "4l": {"text": "Islam is an actual mental disorder.", "parent": "It's almost as if totalitarian governments don't like people who are different, regardless of religion.\n\nI bet you think the burka is Islamic clothing too. It's not, you brainwashed piece of shit. You're just as uneducated about Islam as the Saudi mulvees who preach it.", "grandparent": "What do you expect from a place that practices Islam?", "title": "Saudi Arabia strips American mother of custody for being too Western", "link": "https://www.cnn.com/videos/world/2019/08/16/saudi-arabia-custody-bethany-vierra-nick-watt-pkg-lead-vpx.cnn"}, "1m": {"text": "Honestly, I'm Brazilian and I had never hated a person before. I though I had, but honestly, even Trump, it's like, \"I wish he fucked off somewhere,\" while with Bolsonaro, I genuinely wish him ill, and it makes me hate him more."}, "2m": {"text": "Honestly, I'm Brazilian and I had never hated a person before. I though I had, but honestly, even Trump, it's like, \"I wish he fucked off somewhere,\" while with Bolsonaro, I genuinely wish him ill, and it makes me hate him more.", "title": "CB demands an apology before he\u2019ll accept a $20 million donation"}, "3m": {"text": "Honestly, I'm Brazilian and I had never hated a person before. I though I had, but honestly, even Trump, it's like, \"I wish he fucked off somewhere,\" while with Bolsonaro, I genuinely wish him ill, and it makes me hate him more.", "title": "CB demands an apology before he\u2019ll accept a $20 million donation", "image": "https://i.redd.it/y71m033ptzi31.jpg"}, "1n": {"text": "Boohoo, go fuck yourself, asshole."}, "2n": {"text": "Boohoo, go fuck yourself, asshole.", "title": "Far-right rally in Portland met by anti-fascist protesters"}, "3n": {"text": "Boohoo, go fuck yourself, asshole.", "title": "Far-right rally in Portland met by anti-fascist protesters", "link": "https://www.nbcnews.com/news/us-news/far-right-rally-portland-met-anti-fascist-protesters-n1043646"}, "4n": {"text": "Boohoo, go fuck yourself, asshole.", "parent": "&gt; Maybe those words are being used so much for a reason, moron. Maybe racism and fascism are becoming more and more noticeable, imbecile.\n\nGo straight to childish insults.  You sound like a calm, rational person. . .", "grandparent": "Maybe those words are being used so much for a reason, moron. Maybe racism and fascism are becoming more and more noticeable, imbecile.", "title": "Far-right rally in Portland met by anti-fascist protesters", "link": "https://www.nbcnews.com/news/us-news/far-right-rally-portland-met-anti-fascist-protesters-n1043646"}, "1o": {"text": "Wonder how long until we find out these poor kids are being sexually abused."}, "2o": {"text": "Wonder how long until we find out these poor kids are being sexually abused.", "title": "Gay Dads adopt all 6 siblings who have spent half a decade in foster care"}, "3o": {"text": "Wonder how long until we find out these poor kids are being sexually abused.", "title": "Gay Dads adopt all 6 siblings who have spent half a decade in foster care", "image": "https://i.redd.it/tehpihtrv4f31.jpg"}, "1p": {"text": "No, I love (heh..) women. I hate women who demand unreasonable shit. Like you. As I said earlier, dumb cunt."}, "2p": {"text": "No, I love (heh..) women. I hate women who demand unreasonable shit. Like you. As I said earlier, dumb cunt.", "title": "Girls mature faster than boys, so men should be able to marry underage girls."}, "3p": {"text": "No, I love (heh..) women. I hate women who demand unreasonable shit. Like you. As I said earlier, dumb cunt.", "title": "Girls mature faster than boys, so men should be able to marry underage girls.", "link": "https://i.redd.it/xt419qur6eq11.jpg"}, "4p": {"text": "No, I love (heh..) women. I hate women who demand unreasonable shit. Like you. As I said earlier, dumb cunt.", "parent": "We get it, you hate women. Be boring somewhere else.", "grandparent": "Must be a case in your family, nothing of that sort happens anywhere else that I've been to. Once you're 21+, you're expected to be and act like an adult.\n\nIDEK why the fuck these dumb ass nonsensical feminist comments are being upvoted. They make absolutely no fucking sense to me. Dumb cunts.", "title": "Girls mature faster than boys, so men should be able to marry underage girls.", "link": "https://i.redd.it/xt419qur6eq11.jpg"}, "1q": {"text": "1.21 niggawatts"}, "2q": {"text": "1.21 niggawatts", "title": "Johnny Storm in training."}, "3q": {"text": "1.21 niggawatts", "title": "Johnny Storm in training.", "video": "https://i.imgur.com/BlpN44h.mp4"}, "4q": {"text": "1.21 niggawatts", "parent": "88 mph", "grandparent": "my favorite part about this is the flaming footprints he left ", "title": "Johnny Storm in training.", "video": "https://i.imgur.com/BlpN44h.mp4"}}
    for (var property in jsonObject) {
        data.push(jsonObject[property]);
    }
};

var load = () => {
    document.getElementById('start').style = "display: None;"
    document.getElementById('demo').style = "display: inline;"
    next_instance = data.shift()
    if ('parent' in next_instance && 'video' in next_instance) {
        document.getElementById("description").innerHTML = "<h1 class='category'>Comment + Title + Multimodal Content + Discussion</h1>"
        document.getElementById("content").innerHTML = "<h2 class='title'>Title: " + next_instance['title'] + "</h2><br><br> \
                                                        <div><video preload='auto' autoplay='autoplay' loop='loop' class='image'> \
                                                                <source src=" + next_instance['video'] + " type='video/mp4'></source></video></div><br><br> \
                                                        <h2 class='grandparent'>Grandparent: " + next_instance['grandparent'] + "</h2><br><br> \
                                                        <h2 class='parent'>Parent: " + next_instance['parent'] + "</h2><br><br> \
                                                        <h2 class='comment'>Comment: " + next_instance['text'] + "</h2>";
    }
    else if ('parent' in next_instance && 'image' in next_instance) {
        document.getElementById("description").innerHTML = "<h1 class='category'>Comment + Title + Multimodal Content + Discussion</h1>"
        document.getElementById("content").innerHTML = "<h2 class='title'>Title: " + next_instance['title'] + "</h2><br><br> \
                                                        <div><img src=" + next_instance['image'] + " class='image'> </div><br><br> \
                                                        <h2 class='grandparent'>Grandparent: " + next_instance['grandparent'] + "</h2><br><br> \
                                                        <h2 class='parent'>Parent: " + next_instance['parent'] + "</h2><br><br> \
                                                        <h2 class='comment'>Comment: " + next_instance['text'] + "</h2>";
    }
    else if ('parent' in next_instance && 'link' in next_instance) {
        document.getElementById("description").innerHTML = "<h1 class='category'>Comment + Title + Link + Discussion</h1>"
        document.getElementById("content").innerHTML = "<h2 class='title'>Title: " + next_instance['title'] + "</h2><br><br> \
                                                        <h2><a href=" + next_instance['link'] + " target='_blank'>Link</a> </h2><br><br> \
                                                        <h2 class='grandparent'>Grandparent: " + next_instance['grandparent'] + "</h2><br><br> \
                                                        <h2 class='parent'>Parent: " + next_instance['parent'] + "</h2><br><br> \
                                                        <h2 class='comment'>Comment: " + next_instance['text'] + "</h2>";
    }
    else if ('video' in next_instance) {
        document.getElementById("description").innerHTML = "<h1 class='category'>Comment + Title + Multimodal Content</h1>"
        document.getElementById("content").innerHTML = "<h2 class='title'>Title: " + next_instance['title'] + "</h2><br><br> \
                                                        <div><video preload='auto' autoplay='autoplay' loop='loop' class='image'> \
                                                                <source src=" + next_instance['video'] + " type='video/mp4'></source></video></div><br><br> \
                                                        <h2 class='comment'>Comment: " + next_instance['text'] + "</h2>";
    }
    else if ('image' in next_instance) {
        document.getElementById("description").innerHTML = "<h1 class='category'>Comment + Title + Multimodal Content</h1>"
        document.getElementById("content").innerHTML = "<h2 class='title'>Title: " + next_instance['title'] + "</h2><br><br> \
                                                        <div><img src=" + next_instance['image'] + " class='image'> </div><br><br> \
                                                        <h2 class='comment'>Comment: " + next_instance['text'] + "</h2>";
    }
    else if ('link' in next_instance) {
        document.getElementById("description").innerHTML = "<h1 class='category'>Comment + Title + Link</h1>"
        document.getElementById("content").innerHTML = "<h2 class='title'>Title: " + next_instance['title'] + "</h2><br><br> \
                                                        <h2><a href=" + next_instance['link'] + " target='_blank'> Link </a></h2><br><br> \
                                                        <h2 class='comment'>Comment: " + next_instance['text'] + "</h2>";
    }
    else if ('title' in next_instance) {
        document.getElementById("description").innerHTML = "<h1 class='category'>Comment + Title</h1>"
        document.getElementById("content").innerHTML = "<h2 class='title'>Title: " + next_instance['title'] + "</h2><br><br> \
                                                        <h2 class='comment'>Comment: " + next_instance['text'] + "</h2>";
    }
    else {
        document.getElementById("description").innerHTML = "<h1 class='category'>New Example - Comment Only</h1>"
        document.getElementById("content").innerHTML = "<h2 class='comment'>Comment: " + next_instance['text'] + "</h2>";
    }

}

</script>

<style>
    .category {
        font-family: 'Open Sans Condensed';
    }
    .image {
        max-width:100%;
        height:auto;
    }
    .grandparent {
        background: #e6ffff;
        font-family: 'Open Sans Condensed';
    }
    .parent {
        background: #e6ffe6;
        font-family: 'Open Sans Condensed';
    }
    .title {
        background: #ffcccc;
        font-family: 'Open Sans Condensed';
    }
    .comment {
        background: #e0ebeb;
        font-family: 'Antic';
    }
    body {
      width: 100%
    }
    header {
      height:125px;
      background: grey;
      border:1px solid #CCC;
      width: 100%;
      margin:0px auto;
    }
    .top {
      margin-top: 25px;
      black: white;
    }
    .middle {
      padding: 50px 0;
      text-align: center;
    }
     h2 {
      color: black;
      padding: 2px 15px 2px 15px;
      border: 10px solid white;
      display: inline-block;
    }
</style>


<header class="header">
    <center class="top"><strong id="description"><h1>DEMO</h1></strong></center>
</header>
<body>

<div class="middle">
    <button id="start" onclick="load()">Start</button>
</div>

<div class="middle" id="demo" style="display: None">
    <div style="margin-left:30%; margin-right:30%;" id="content"></div><br><br>
    <div>
        <button onclick="load()">Yes</button>
        <button onclick="load()">No</button>
    </div>
</div>


</body>
</html>