首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用Vanilla Javascript使用REST国家/地区API JSON数据生成多项选择题。随机化答案的顺序

使用Vanilla Javascript使用REST国家/地区API JSON数据生成多项选择题。随机化答案的顺序
EN

Stack Overflow用户
提问于 2018-10-11 10:15:20
回答 1查看 1.4K关注 0票数 2

我正在尝试使用Google Maps API和REST Countries构建一个地理游戏/测验。我有谷歌地图的功能与REST国家API一起工作。在每次页面刷新时,都会随机加载一个国家/地区,并从REST国家/地区API生成数据(它是隐藏的,所以用户只能得到关于它是哪个国家/地区的提示)。地图还会平移到随机国家的中心(只有没有国家标签的混合图像)。这正是我想要发生的事情。

我的Javascript中有一个循环,它拉取多项选择题部分的国家(答案),但它只是从一开始就拉取。有没有办法随机化标签并在其中插入正确的答案(countryData.name)?我让它工作了,但我的代码一点也不枯燥,第一个选择总是正确的答案。也不确定如何让循环随机抽取答案。这是我在开始设置样式和修复积分系统之前需要做的最后一件事。抱歉,我得把我的Google API密钥藏起来。

代码语言:javascript
复制
const countriesList = document.getElementById("countries");
let gameTitle = document.querySelector(".gameTitle");
let selectedCountry;
let updateScore = document.querySelector(".score");
let guesses = document.querySelector(".wrongAnswers");
let score = 0;
let wrongAnswers = 0;

// Rest Countries
function newQuestion() {
    fetch("https://restcountries.eu/rest/v2/all")
    .then(response => response.json())
    .then(data => initialize(data))
    .catch(error => console.log("Error:", error));

function initialize(countriesData) {
    // Define countries
    countries = countriesData;
    // Create an empty string where you add your option value in at random as a string
    let options = "";
    countries.forEach(country => options += `<option value="${country.alpha3Code}">${country.name}</option>`);
    countriesList.innerHTML = options;
    // Random index of one instance of the API call
    countriesList.selectedIndex = Math.floor(Math.random() * countriesList.length);
    // Set or return the index of the selected value
    // for display card
    displayCountryInfo(countriesList[countriesList.selectedIndex].value);
    // displayCountryInfo(countriesList.value);
}

function displayCountryInfo(countryByAlpha3Code) {
    let addQuestions = document.querySelector(".question");
    const countryData = countries.find(country => country.alpha3Code === countryByAlpha3Code);
    selectedCountry = countryData.name;
    document.querySelector("#flag-container img").src = countryData.flag;
    // If the flag fails to load, display the country name
    document.querySelector("#flag-container img").alt = `flag of ${countryData.name}`;
    document.getElementById("country").innerHTML = countryData.name;
    document.getElementById("capital").innerHTML = countryData.capital;
    document.getElementById("population").innerHTML = countryData.population.toLocaleString("en-US");
    document.getElementById("currencies").innerHTML = countryData.currencies.filter(c => c.name).map(c => `${c.name} (${c.code})`).join(', ');
    let languages = document.getElementById("languages").innerHTML = countryData.languages.filter(l => l.name).map(l => `${l.name}`).join(', ');
    document.getElementById("region").innerHTML = countryData.region;
    document.getElementById("subregion").innerHTML = countryData.subregion;
    document.getElementById("lat-long").innerHTML = countryData.latlng;
    
    initMap(countryData);

    addQuestions.innerHTML = `I am located in ${countryData.subregion}. There are ${countryData.languages.length} language(s) spoken here: ${languages}. My capital city is ${countryData.capital}. What's my name?`;

    function multipleChoice() {
        for (let i = 0; i < 7; i++) {
            let $input = document.querySelector('#inputs');
            $input.innerHTML = $input.innerHTML + `<input id='choice${i}' name='countries' type='radio' onchange='getValue(this)' value='${countries[i].name}'/> ${countries[i].name}`;
        }
    }

    multipleChoice();
}
  
// Access Google Maps API
function initMap(country) {
    // Create a variable 
    let myLatLng = new google.maps.LatLng(country.latlng[0], country.latlng[1]);
    //object literal
    //instantiate map with mapOptions object
    let mapOptions = { 
        center: myLatLng,
        zoom: 5, 
        disableDefaultUI: true,
        mapTypeId: 'satellite',
        heading: 90,
        tilt: 45,
        rotateControl: true,
    }

    let marker = new google.maps.Marker({
        position: myLatLng
    });

    // Create map
    let map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
    // Set marker
    marker.setMap(map);
  }

}

newQuestion();

function getValue(element) {
    if (element.value === selectedCountry) {
        score++;
        updateScore.innerHTML = `Score: ${score}`;
        newQuestion();
        if (score === 10) {
            gameTitle.innerHTML = "You Won!";
        }
    } else {
        wrongAnswers++;
        guesses.innerHTML = `Wrong guesses ${wrongAnswers}`
        newQuestion();
        if (wrongAnswers === 3) {
            gameTitle.innerHTML = "Game Over!";
        }
    }
}
代码语言:javascript
复制
body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    background: rgb(51, 45, 45);
    height: 100%; 
    margin: 0; 
    padding: 0;
}
  
p {
    padding: 0 2.5rem 2.5rem;
    margin: 0;
}

h3, .score, .wrongAnswers {
    text-align: center;
}

html {
    font-family: 'Dosis', sans-serif;
    height: 100%;
}

#mapDiv { 
    height: 50%; 
}

#main-container {
    display: none;
    float: right;
    width: 502px;
    margin: 30px auto;
    padding: 0;
  }

#flag-container {
    float: left;
    height: 252px;
    width: 502px;
    background-color: rgb(19, 16, 16);
    border: 10px solid rgb(32, 13, 28);
    box-shadow: 2px 4px 25px rgb(27, 4, 4);
  }

#flag-container img {
    width: 100%;
    height: 100%;
  }

#quiz-container {
    color: white;
    background: rgb(51, 45, 45);
    overflow: hidden;
}

@media screen and (max-width: 768px) {
    body { 
        font-size: 12px; 
    }

    #main-container { 
        width: 342px; 
    }  

    #flag-container { 
        height: 172px;
        width: 50%; 
    }  

    #info-container select { 
        font-size: 12px; font-weight: 600; 
    }
}
代码语言:javascript
复制
<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>MapApp Quiz</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">         -->
    </head>
    <body>
        <div id="mapDiv"><h1></h1></div>
        <div id="root"></div>

        <div id="flag-container">
            <img src="" alt="">
        </div>

        <div id="main-container">
            <div class="card">
                <div id="info-container">
                    <select id="countries"></select>
                    <p>Country: <span id="country"></span></p>
                    <p>Capital: <span id="capital"></span></p>
                    <p>Population: <span id="population"></span></p>
                    <p>Currencies: <span id="currencies"></span></p>
                    <p>Languages: <span id="languages"></span></p>
                    <p>Region: <span id="region"></span></p>
                    <p>Subregion: <span id="subregion"></span></p>
                    <p>Lat/Long: <span id="lat-long"></span></p>
                </div>
            </div>
        </div>

        <div id="quiz-container">
            <h3 class="gameTitle">MapApp Quiz</h3>
                <h5 class="score">Score: 0</h5>
                <h5 class="wrongAnswers">Wrong guesses: 0</h5>
            <p class="question"></p>
            <form id="inputs">
            </form>
        </div>

        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]"></script>
        <script src="main.js" async defer></script>
    </body>
</html>

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-10-14 09:58:06

好的,所以我不清楚你是如何选择“正确”答案的,但让我们假设你有一个国家,然后是所有国家的列表。你可以列出4个随机的国家和正确的国家,如下所示:

代码语言:javascript
复制
function generateAnswers(answer, allCountries) {
    let wrongCountries = allCountries.filter(country => country.alpha3Code !== answer.alpha3Code); 

    const countOfAnswers = 5;
    const positionOfCorrectAnswer = Math.floor(Math.random() * (countOfAnswers + 1));
    const answers = []; 
    for(let i=0; i< countOfAnswers; i++) {
       if (i === positionOfCorrectAnswer) {
          answers.push(answer);
       } else {
         let randomAnswer = wrongCountries[Math.floor(Math.random() * wrongCountries.length)]; 
          wrongCountries = wrongCountries.filter(country => country.alpha3Code !== randomAnswer.alpha3Code); 
          answers.push({ name: randomAnswer.name, alpha3Code: randomAnswer.alpha3Code } );
       } 
    }
    return answers;
};

好的,这个函数应该会返回一个包含5个国家和地区的数组,包括正确答案和4个随机错误答案。您可以在构建选项并从中构建HTML的代码中调用它,而不是使用完整的国家/地区列表。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52751189

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档