Расчет площади прямоугольника с разными изображениями - PullRequest
Новая
       32

Расчет площади прямоугольника с разными изображениями

0 голосов
/ 23 марта 2020

Я нахожусь в процессе создания веб-сайта для расчета площади кирпичей различного размера go и не уверен, как это сделать. Я создал 13i sh изображений кирпичей le go с заданными высотой и шириной. один был скопирован ниже Я понимаю, как выполнить умножение и проверку (ответ пользователя против фактического ответа) аспекта этот сайт, но не знаю, как рандомизировать эти изображения, а затем хранить переменные для них, такие как длина и ширина (для расчета площади). Вы могли бы предложить какие-либо идеи на javascript для этого? 

var number1;
var number2;
var response;
var calcanswer;
var score = 0;
window.onload = areaquestion;

var areas = new Array("Images/1*1.png","Images/2*1.png","Images/2*2.png","Images/3*1.png","Images/3*2.png","Images/4*1.png","Images/4*2.png","Images/4*3.png","Images/5*1.png","Images/5*2.png","Images/6*1.png","Images/6*2.png","Images/6*4.png");

function areaquestion() {
     var randomNum = Math.floor(Math.random() * areas.length);
     document.getElementById("question").src = areas[randomNum];
    number1 = Math.floor( 1 + Math.random() * 9 );
    number2 = Math.floor( 1 + Math.random() * 9 );
    var question = document.getElementById("question");
    question.innerHTML = "What is the area of this shape?";
    calcanswer = (number1*number2);
}

function check()
{
    var statusDiv = document.getElementById("status");
    response=document.getElementById("answer").value;

    if(response != calcanswer)
    statusDiv.innerHTML="Incorrect";
    else
    if (response==calcanswer)
    {
        statusDiv.innerHTML="Very good!";
        score ++;
        document.getElementById("score").textContent = score
        document.getElementById("answer").value = "";
        problem();
    }
}
* {
    box-sizing: border-box;
  }
  
  /* Style the body */
  body {
    font-family: Arial;
    margin: 0;
  }
  
  /* Header/logo Title */
  .header {
    padding: 30px;
    text-align: center;
    background: yellow;
    color: black;
    font-family: Arial, Helvetica, sans-serif;
  }
  .score {
    display:flex; 
    flex-wrap: wrap;
    float: right;
  }
  
  #answer {
    width: 30%;
    background-color: yellow;
    color:black;
    border-color: black;
    padding: 12px 20px;
    float: initial;
    text-size-adjust: 30;
  }

  #solve {
    width: 20%;
    background-color: blue;
    color:rgb(255, 255, 255);
    border-color: black;
    padding: 12px 20px;
    font-size: 100%;
  }
  
  /* Column container */
  .row {  
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Create two unequal columns that sits next to each other */
  /* Sidebar/left column */
  .side {
    flex: 50%;
    background-color: #ffffff;
    padding: 20px;
    color:#000;
  }
  
  /* Main column */
  .main {
    flex: 50%;
    background-color: white;
    padding: 20px;
  }
  
  
  /* Footer */
  .footer {
    display: flex;
    flex-wrap: wrap;
    padding: 100px;
    text-align: right;
    background: #fff;
    flex-direction: column;
  }

  #practicebtn{
    padding:30px;
  }

  #playbtn{
    padding:30px;
  }
  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {
    .row, .navbar, .footer {   
      flex-direction: column;
    }
  }
<!DOCTYPE html>
<html>
<title>Lego Area</title>
  <head>
    <link rel="stylesheet" href="CSS/Play.css">
    <script src="JavaScript/Play.js"></script>
  </head>
<body onload="problem();">
  
  <div class="header">
    <h1>LEGO AREA</h1>
    <p>Calculating <b>area</b> with Emmet.</p>
    <div id="score" class="score" value="SCORE:"></div>
  </div>
    
  <form>
    <div class="row">
      
      <div class="side">
        <div id="question"></div>
        <div id ="prompt"></div>
        <input type="text" id="answer"/>
        
      </div>

      <div class="main">
        <input id="solve" type="button" value="CHECK!" onclick="check()" />
      </div>

    </div>
  </form>
  <div id="status"></div>
  <!-- Footer -->
  <div class="footer">
    <div class="practice"> <a href="Practice.html"><img src="Images/legoBlue2.png" id="practicebtn"  width="20%"></a></div>
    <div class="play"> <a href="Play.html"><img src="Images/legored2.png" id="playbtn" width="20%"></a></div>
  </div>

  
</body>
</html>

1 Ответ

0 голосов
/ 23 марта 2020

Не могли бы вы создать массив объектов, содержащий все ваши legos с парами ключ / значение, указывающими исходное изображение, длину, ширину и площадь каждого? Например: 

const legos = [
    {
        name: lego01
        image: "image01.png",
        len: 10,
        wid: 4,
        area: 40
    },
    {
        name: lego02
        image: "image02.png",
        len: 6,
        wid: 6,
        area: 36
    }
    {
        name: lego03
        image: "image03.png",
        len: 12,
        wid: 8,
        area: 96
    }
]

Тогда ваша программа может выбрать случайный файл go. И вы можете получить доступ к его площади или длине и ширине, используя синтаксис randomLe go .width.

Надеюсь, я понял, что вы хотели сделать.

...