<commit_before><!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">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Oyster University | Play</title>

  <!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="css/freelancer.css" rel="stylesheet">
  <link href="css/learn.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'>
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top" class="index">

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#page-top">Oyster University</a>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <!-- Header -->
  <header>
    <div class="container" style="width:100%;margin:0; top:-95px;">
      <div class="row">
        <div class="wrapper" style='z-index:1;'>
          <ul class="bg-bubbles" style="margin-bottom:0px">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="col-lg-12" style='z-index:2;'>
          <div class="distribution-map">
            <div class='instructions' style='width:475px;'>
              <h1>Q:</h1>
              <h4>Where does the <u>Mantle</u> go?<br>Click on the correct dot to continue</h4>
            </div>
            <img class="img-responsive" style='height: 650px; width:470px; left:30.5%;' src="img/anatomyblank.png" alt="">
            <!--In the original application, these points are injected with Javascript, but ideally, they'd be injected with a haml loop. Because I'm hardcoding content, I'm presenting this as prerendered HTML-->
             <a href='/vice'>
              <button class="map-point mantle" style="margin-left:-60px; margin-top:-380px;" onclick='alert("Correct")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>CORRECT!</h2>
                  </div>
                </div>
              </button>
            </a>
            <a href='/play'>
              <button class="map-point labi" sstyle="margin-left:90px; margin-top:-410px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>
            <a href='/play'>
              <button class="map-poin vice" style="top:38%;left:51%" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>
            <a href='/play'>
              <button class="map-point connect" style="margin-left:73px;margin-top:-250px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point int" style="top:49%;left:52%" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point adduct" style="margin-left:20px;margin-top:-230px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point gills" style="margin-left:100px;margin-top:-300px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point peri" style="top:55.5%;left:50%" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point rectum" style="margin-left:-55px;margin-top:-290px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- Footer -->

  <footer class="text-center">
    <div class="footer-above">
      <div class="container">
        <div class="row">
          <div class="footer-col col-md-4">
            <h3>Billion Oyster Project</h3>
            <a href="http://www.billionoysterproject.org/" class="btn-social btn-outline"><i class="fa fa-fw fa-info-circle"></i></a>
          </div>
          <div class="footer-col col-md-4">
            <h3>Around the Web</h3>
            <ul class="list-inline">
              <li>
                <a href="https://www.facebook.com/billionoysterproject" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
              </li>
              <li>
                <a href="https://twitter.com/billionoyster" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
              </li>
              <li>
                <a href="https://www.newyorkharborschool.org/donate/" class="btn-social btn-outline"><i class="fa fa-fw fa-money"></i></a><commit_msg>had to rollback a day works but not scalable<commit_after><!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">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Oyster University | Play</title>

  <!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Custom CSS -->
  <link href="css/freelancer.css" rel="stylesheet">
  <link href="css/learn.css" rel="stylesheet">

  <!-- Custom Fonts -->
  <link href='//fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'>
  <link href='//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900' rel='stylesheet' type='text/css'>
  <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
  <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body id="page-top" class="index">

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#page-top">Oyster University</a>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <!-- Header -->
  <header>
    <div class="container" style="width:100%;margin:0; top:-95px;">
      <div class="row">
        <div class="wrapper" style='z-index:1;'>
          <ul class="bg-bubbles" style="margin-bottom:0px">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="col-lg-12" style='z-index:2;'>
          <div class="distribution-map">
            
            <img class="img-responsive" style='height: 650px; width:470px; left:30.5%;' src="img/anatomyblank.png" alt="">
            <!--In the original application, these points are injected with Javascript, but ideally, they'd be injected with a haml loop. Because I'm hardcoding content, I'm presenting this as prerendered HTML-->
             <a href='/vice'>
              <button class="map-point mantle" style="margin-left:-60px; margin-top:-380px;" onclick='alert("Correct")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>CORRECT!</h2>
                  </div>
                </div>
              </button>
            </a>
            <a href='/play'>
              <button class="map-point labi" sstyle="margin-left:90px; margin-top:-410px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>
            <a href='/play'>
              <button class="map-poin vice" style="top:38%;left:51%" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>
            <a href='/play'>
              <button class="map-point connect" style="margin-left:73px;margin-top:-250px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point int" style="top:49%;left:52%" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point adduct" style="margin-left:20px;margin-top:-230px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point gills" style="margin-left:100px;margin-top:-300px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point peri" style="top:55.5%;left:50%" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>

            <a href='/play'>
              <button class="map-point rectum" style="margin-left:-55px;margin-top:-290px;" onclick='alert("Wrong")'>
                <div class="content">
                  <div class="centered-y">
                    <h2>WRONG!</h2>
                  </div>
                </div>
              </button>
            </a>
						<div class='instructions' style='width:475px;'>
              <h1>Q:</h1>
              <h4>Where does the <u>Mantle</u> go?<br>Click on the correct dot to continue</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- Footer -->

  <footer class="text-center">
    <div class="footer-above">
      <div class="container">
        <div class="row">
          <div class="footer-col col-md-4">
            <h3>Billion Oyster Project</h3>
            <a href="http://www.billionoysterproject.org/" class="btn-social btn-outline"><i class="fa fa-fw fa-info-circle"></i></a>
          </div>
          <div class="footer-col col-md-4">
            <h3>Around the Web</h3>
            <ul class="list-inline">
              <li>
                <a href="https://www.facebook.com/billionoysterproject" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
              </li>
              <li>
                <a href="https://twitter.com/billionoyster" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
              </li>
              <li>
                <a href="https://www.newyorkharborschool.org/donate/" class="btn-social btn-outline"><i class="fa fa-fw fa-money"></i></a>
{'fraction_non_alphanumeric': 0.1823189926547744, 'fraction_numerical': 0.01993704092339979, 'mean_word_length': 1.7455887648541593, 'pattern_counts': {'":': 0, '<': 449, '<?xml version=': 0, '>': 449, 'https://': 10, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4068110', 'n_tokens_mistral': 4967, 'n_tokens_neox': 4558, 'n_words': 877}