Geo questions

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HACKARTO.js</title>
    
    <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>
    
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
    
    <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);

Updated missing url https://cdn.rawgit.com/CartoDB/cartodb.js/@4.0.0-alpha.28/carto.js to https://cdn.jsdelivr.net/gh/cartodb/cartodb.js/@4.0.0-alpha.28/carto.js

https://unpkg.com/leaflet@1.2.0/dist/leaflet.js

https://cdn.rawgit.com/CartoDB/cartodb.js/@4.0.0-alpha.28/carto.js