To make smarter decisions in our programs, we need if statements that rely on smarter conditions like in the trivia app below.

<html>
<head>
<style>
body {
text-align: center;
font-size : 20px;
margin: 0 auto;
height: 400px;
}

button {
width: 200px;
height: 30px;
font-size : 20px;
border-radius: 5px;
margin:0 auto;
display:block;
background-color: #6d3acf;
color: white;
outline: none;
}

.radioDiv {
margin: 0 auto;
width: auto;
text-align: left;
display: table;
}

.questionDiv {
border: 1px solid  #f0f5fd;
border-radius: 20px;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
width: 300px;
height: 200px;
background-color: #d9e8fb;
margin: 0 auto;
}

</style>
</head>
<body id="main">

<h1>Trivia Time</h1>
<div class="questionDiv">
<h3>Which painter was born in Spain?</h3>
<div class="radioDiv">
<input type="radio" name="painter" value="picasso"> Picasso<br>
<input type="radio" name="painter" value="matisse"> Matisse<br><br>
</div>
<button onClick="check()">Submit</button>
</div>
<script>
function check() {
var feedback = document.getElementById("feedback");

var radios = document.getElementsByName('painter');

var body = document.getElementById("main");
if(feedback !== null) {
body.removeChild(feedback);
}


for (var i = 0, length = radios.length; i < length; i++) {
var paragraph = document.createElement("p");
paragraph.id = "feedback";
console.log("checking");
if (radios[i].checked) {
console.log("found");
if(radios[i].value === "picasso") {
paragraph.innerHTML = "Correct!";
paragraph.style.color = "#62d76b";
} else {
paragraph.innerHTML = "Not quite!";
paragraph.style.color = "#d7465f";
}
body.appendChild(paragraph);
break;
}
}

}
</script>
</body>
</html>]]>