D3 Examples - Geo questions

xxxxxxxxxx
 
  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HACKARTO.js</title>
    <!-- Include Leaflet 1.2.0 Library -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
    <!-- Include cartodb.js Library -->
    <script src="https://cdn.jsdelivr.net/gh/cartodb/cartodb.js/@4.0.0-alpha.28/carto.js"></script>
    <style>
      html { box-sizing:border-box; height:100%; }
      body { background:#f2f6f9; height:100%; font-family:"Open sans", Helvetica, Arial, sans-serif; }
      #container { display:flex; width:100%; height:calc(100vh - 151px); background: #fff3e8;}
      #map { flex:1; margin:10px; }
      #widgets { width:300px; margin:10px 10px 10px 0; }
      .widget { background:white; padding:10px; margin-bottom:10px; }
      .widget h1 { font-size:1.2em; }
      #ui { height: 151px; position: static; }
      #retry { font-size: 2em; }
      #video { position: absolute; left: -10000px; }
    </style>
  </head>
  <body>
    <div id="ui">
      <span class="score"></span>
      <h1 class="question"></h1>
      <div id="feedback">
        <div id="video"></div>
        <button id="retry">Wrong, sorry. Try again?</button>
      </div>
    </div>
    <div id="container">
      <div id="map"></div>
    </div>
    
    <script>
      // set to true for TRUE HARDCORE GEOGRAPHY QUESTIONS
      const hardMode = false;
      let hiScore = localStorage.getItem('hiScore') || 0;
      let curScore = 0;
      const retry = document.querySelector('#retry');
      let isWrong = false;
      retry.style.visibility = "hidden";
      retry.addEventListener('click', function () {
        feedback.innerHTML = '';
        retry.style.visibility = "hidden";
        updateScore();
        findMe = makeQuestion();
      })
      const question = document.querySelector('.question');
      const score = document.querySelector('.score');
      const feedback = document.querySelector('#video');
      let mapCountries;
      let findMe;
      function getRandomCountry () {
        return mapCountries.splice(Math.floor(Math.random() * mapCountries.length), 1)[0];
      }
      function makeQuestion () {
        isWrong = false;
        const country = getRandomCountry();
        question.innerHTML = `Can you find...${country.name}?`;
        return country;
      }
      function updateScore () {
        hiScore = curScore > hiScore ? curScore : hiScore;
        score.innerText = `Current: ${curScore} | High: ${hiScore}`;
      }
      function correctAnswer () {
        curScore += 100;
        updateScore();
        findMe = makeQuestion();
      }
      function incorrectAnswer () {
        isWrong = true;
        curScore = 0;
        updateScore();
        localStorage.setItem('hiScore', hiScore);
        retry.style.visibility = 'visible';
        feedback.innerHTML = `
        <iframe width="560" height="315" src="https://www.youtube.com/embed/WrjwaqZfjIY?autoplay=1" frameborder="0" allowfullscreen></iframe>
        `
      }
      var buildApp = function (countries) {
        updateScore();
        console.log(countries.length);
        mapCountries = countries;
        findMe = makeQuestion();
        // 1. Setting up the Leaflet Map
        var map = L.map('map').setView([0, 0], 2);
        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: '&copy;<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<a href="https://carto.com/attribution">CARTO</a>'
          }).addTo(map);
​
        // 2 Defining a carto.Client
        var client = new carto.Client({
          apiKey: 'fake',
          username: 'roman-carto'
        });
​
        // 3. Displaying on the map
        // 3.1 Defining the layer
        var worldBorders = new carto.source.Dataset('world_borders');
        var style = new carto.style.CartoCSS(`
          #layer {
            polygon-fill: #fff;
            polygon-opacity: 1;
            ::outline {
              line-color: #EEEEEE;
              line-width: 1.1;
              line-opacity: 1;
            }
          }
        `
        );
        var countries = new carto.layer.Layer(worldBorders, style, {
          
        });
​
        client.addLayer(countries);
​
        // 3.3. Adding the layers to the map
        client.getLeafletLayer().addTo(map);
​
        var popup = L.popup();
          countries.on('featureClicked', function (featureEvent) {
            if (isWrong) return;
            if (featureEvent.data.cartodb_id === findMe.cartodb_id) {
              correctAnswer();
            } else {
              incorrectAnswer();
            }
        });
      };
      fetch('https://roman-carto.carto.com/api/v2/sql?q=select%20*%20from%20%22roman-carto%22.world_borders&format=geojson')
        .then(response => response.json())
        .then(geojson => geojson.features.map(feature => feature.properties))
        .then(countries => countries.filter(country => hardMode || country.area > 30000))
        .then(buildApp);
    </script>
  </body>
</html>
​
    