typesConversionTest

https://learn.javascript.ru/types-conversion

by Sergey Nikolaev

HTML

<table id="quiz">
  <caption>
    Преобразование типов для примитивов
  </caption>
  <tr>
    <th>вопрос</th>
    <th>ответ</th>
  </tr>
  <tr>
    <td>"" + 1 + 0</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>"" - 1 + 0</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>true + false</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>6 / "3"</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>"2" * "3"</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>4 + 5 + "px"</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>"$" + 4 + 5</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>"4" - 2</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>"4px" - 2</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>7 / 0</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>"  -9\n" + 5</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>"  -9\n" - 5</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>5 &amp;&amp; 2</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>2 &amp;&amp; 5</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>5 || 0</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>0 || 5</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>null + 1</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>undefined + 1</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>null == "\n0\n"</td>
    <td><input type="text"></td>
  </tr>
  <tr>
    <td>+null == +"\n0\n"</td>
    <td><input type="text"></td>
  </tr>
</table>
<input id="checkBtn" type="button" value="проверить"><br>
<input id="resolve" type="button" value="ответы">

CSS

input[type="text"] {
  width: 140px;
}
td, th {
  width: 150px;
  font-family: monospace;
}
.true {
  background-color: #f2ffcc;
}
.false {
  background-color: #ffece6;
}

input[type="button"] {
  width: 300px;
}
#checkBtn {
  
  height: 50px;
}

JavaScript

checkBtn.onclick = function() {
	var tbody = quiz.querySelector("tbody");
  var rows = tbody.querySelectorAll("tr");
  
  for(let i = 1; i < rows.length; i++) {
  	var answer = rows[i].querySelector("input");
    var result = eval(rows[i].children[0].textContent);
    
    if(typeof result == "string") {
    	result = "\"" + result + "\"";
    }
    //---fix " -9\n" + 5---
    if(rows[i].children[0].textContent.replace("\\n", "") == '"  -9" + 5') {
    	result = "\" -9\\n5\"";
    }
    //---
    
    if(answer.value.trim() === String(result)) {
    	answer.className = "true";
    } else {
    	answer.className = "false";
    }
  }
  
  var trueAnswers = tbody.querySelectorAll(".true").length || 0;
  var total = rows.length - 1;
  
  this.value = "результат: " + trueAnswers + "/" + total;
};

resolve.onclick = function() {
	var tbody = quiz.querySelector("tbody");
  var rows = tbody.querySelectorAll("tr");
  
  for(let i = 1; i < rows.length; i++) {
  	//var input = rows[i].querySelector("input");
    //input.value = eval(rows[i].children[0].textContent);
    
    var answer = document.createElement("td");
  	var result = eval(rows[i].children[0].textContent);
    
    if(typeof result == "string") {
    	result = "\"" + result + "\"";
    }
    
    answer.textContent = result;
    
    //---fix---
    if(rows[i].children[0].textContent.replace("\\n", "") == '"  -9" + 5') {
    	answer.textContent = "\" -9\\n5\"";
    }
    //---
    
    rows[i].append(answer);
  }
  resolve.disabled = true;
}