Question 1
Component A
-
The code below is from the binary project that takes the user’s input and uses logic gates to evaluate their input to produce an emoji output.
-
It can be viewed here: Logic Gates With Emojis
- I receive the input of the user by performing a function whenever the user clicks on the “Run Logic” button. This function will take the values of the user input and evaluate them to produce an emoji output
- My program doesn’t get any list or collection type but I individually take the values of the data inputted by the user. For example, I have 3 different questions, each with a true or false value(0 or 1 binary). Depending on what the user answers to the question, I grab the value of the data and evaluate
function getSelectedValue(options) {
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
return options[i].value;
}
}
// returns a default value or handle the case where no radio button is selected
return undefined;
}
- The procedure, getSelectedValue, takes the questions input as a parameter and will return either a string value of “true” or “false” or undefined if the radio button isn’t selected.
- Inside the procedure, getSelectedValue, there is an algorithm that performs sequencing(order of things) by performing the for loop for every option before the if statement of checking if the option is checked. Selection occurs in the algorthm because it is specifically checking each question and if one is selected. Lastly, the algorithm performs iteration because there is a for and if loop so it is a repeated process for each question.
-
This procedure and algorithm is called when creating variables to check the values for each question
- Here are the instructions if you go to the website:
- Input your answers to the questions and see the emojis that correspond to your mood for that day. Best completed if you talk about your prevous day.
- The output is visual because it will show an emoji of how the use is feeling depending on what they inputted
<html>
<head>
<title>Logic Gates With Emojis</title>
<style>
.gates {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">
Input your answers to the questions and see the emojis that correspond to your mood for that day. Best completed if you talk about your prevous day.
</th>
</tr>
<tr>
<th>Questions</th>
<th>Circuit Diagram</th>
<th>Output</th>
</tr>
<tr>
<td>
<p>Did you get more than 8 hours of sleep?</p>
<form>
<input type="radio" name="question1" id="question1answer1" value="true" />
<label>A</label><br />
<input type="radio" name="question1" id="question1answer2" value="false" />
<label>B</label><br />
</form>
</td>
<td rowspan="3">
<img id="diagram" src="../../../images/blank-diagram.png" class="gates">
</td>
<td rowspan="3">
<span id="emojiOutput" style='font-size:100px;'>🤔
</span>
</td>
</tr>
<tr>
<td>
<p>Did you finish your homework?</p>
<form>
<input type="radio" name="question2" id="question2answer1" value="true" />
<label>A</label><br />
<input type="radio" name="question2" id="question2answer2" value="false" />
<label>B</label><br />
</form>
</td>
</tr>
<tr>
<td>
<p>Are you excited for school?</p>
<form>
<input type="radio" name="question3" id="question3answer1" value="true" />
<label>A</label><br />
<input type="radio" name="question3" id="question3answer2" value="false" />
<label>B</label><br />
</form>
</td>
</tr>
</table>
<button id="logicSubmit">Run Logic</button>
<script>
// checks when the submit button is clicked to perform a function for what will happen
document.getElementById('logicSubmit').addEventListener('click', process);
function process() {
// get the radio buttons that are in each question
var Q1Options = document.getElementsByName('question1');
var Q2Options = document.getElementsByName('question2');
var Q3Options = document.getElementsByName('question3');
// calling the getSelectedValue function and input the radio buttons for each question as an argument. this is important because the function will loop through the amount of radio buttons and whichever one is
// checked will be set to true
var Q1Value = getSelectedValue(Q1Options);
var Q2Value = getSelectedValue(Q2Options);
var Q3Value = getSelectedValue(Q3Options);
var output = document.getElementById('emojiOutput');
// test code to check what happens when the question1 is set to true
switch (Q1Value) {
case "true":
if (Q2Value === "true" & Q3Value === "true") {
output.innerHTML = '😁';
document.getElementById('diagram').src="../../../images/TTT.png";
} else if (Q2Value === "true" & Q3Value === "false") {
output.innerHTML = '🙃';
document.getElementById('diagram').src="../../../images/TTF.png";
} else if (Q2Value === "false" & Q3Value === "true") {
output.innerHTML = '🙄';
document.getElementById('diagram').src="../../../images/TFT.png";
} else {
output.innerHTML = '🙁';
document.getElementById('diagram').src="../../../images/TFF.png";
}
break;
case "false":
if (Q2Value === "true" & Q3Value === "true") {
output.innerHTML = '🥱';
document.getElementById('diagram').src="../../../images/FTT.png";
} else if (Q2Value === "true" & Q3Value === "false") {
output.innerHTML = '🤔';
document.getElementById('diagram').src="../../../images/FTF.png";
} else if (Q2Value === "false" & Q3Value === "true") {
output.innerHTML = '🧐';
document.getElementById('diagram').src="../../../images/FFT.png";
} else {
output.innerHTML = '💀';
document.getElementById('diagram').src="../../../images/blank-diagram.png";
}
break;
}
// note: when all true, dont need statement because everything is satisfied
// function closing bracket dont delete
}
// function that takes the questions input as a parameter and loops through the amount of options, which is 2, and if a certain value is checked, then set the value to true
function getSelectedValue(options) {
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
return options[i].value;
}
}
// returns a default value or handle the case where no radio button is selected
return undefined;
}
</script>
</body>
</html>
Component B
- Here is my video demonstrating input, function, and output:
Component C
Procedure
function getSelectedValue(options) {
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
return options[i].value;
}
}
return undefined;
}
- The procedure, getSelectedValue, takes the questions input as a parameter and will return either a string value of “true” or “false” or undefined if the radio button isn’t selected.
- Inside the procedure, getSelectedValue, there is an algorithm that performs sequencing(order of things) by performing the for loop for every option before the if statement of checking if the option is checked. Selection occurs in the algorthm because it is specifically checking each question and if one is selected. Lastly, the algorithm performs iteration because there is a for and if loop so it is a repeated process for each question.
var Q1Value = getSelectedValue(Q1Options);
var Q2Value = getSelectedValue(Q2Options);
var Q3Value = getSelectedValue(Q3Options);
- This procedure and algorithm is called when creating variables to check the values for each question
List
<tr>
<td>
<p>Did you get more than 8 hours of sleep?</p>
<form>
<input type="radio" name="question1" id="question1answer1" value="true" />
<label>A</label><br />
<input type="radio" name="question1" id="question1answer2" value="false" />
<label>B</label><br />
</form>
</td>
<td rowspan="3">
<img id="diagram" src="../../../images/blank-diagram.png" class="gates">
</td>
<td rowspan="3">
<span id="emojiOutput" style='font-size:100px;'>🤔
</span>
</td>
</tr>
<tr>
<td>
<p>Did you finish your homework?</p>
<form>
<input type="radio" name="question2" id="question2answer1" value="true" />
<label>A</label><br />
<input type="radio" name="question2" id="question2answer2" value="false" />
<label>B</label><br />
</form>
</td>
</tr>
<tr>
<td>
<p>Are you excited for school?</p>
<form>
<input type="radio" name="question3" id="question3answer1" value="true" />
<label>A</label><br />
<input type="radio" name="question3" id="question3answer2" value="false" />
<label>B</label><br />
</form>
</td>
</tr>
- Data is stored by having values to each question in a form. The procedure shown above will iterate through each question and check which one is selected. For the “Are you excited for school?” question, the procedure will check which button is selected and return its value as either “true” or “false”.
var Q1Options = document.getElementsByName('question1');
var Q2Options = document.getElementsByName('question2');
var Q3Options = document.getElementsByName('question3');
var Q1Value = getSelectedValue(Q1Options);
var Q2Value = getSelectedValue(Q2Options);
var Q3Value = getSelectedValue(Q3Options);
var output = document.getElementById('emojiOutput');
switch (Q1Value) {
case "true":
if (Q2Value === "true" & Q3Value === "true") {
output.innerHTML = '😁';
document.getElementById('diagram').src="../../../images/TTT.png";
} else if (Q2Value === "true" & Q3Value === "false") {
output.innerHTML = '🙃';
document.getElementById('diagram').src="../../../images/TTF.png";
} else if (Q2Value === "false" & Q3Value === "true") {
output.innerHTML = '🙄';
document.getElementById('diagram').src="../../../images/TFT.png";
} else {
output.innerHTML = '🙁';
document.getElementById('diagram').src="../../../images/TFF.png";
}
break;
case "false":
if (Q2Value === "true" & Q3Value === "true") {
output.innerHTML = '🥱';
document.getElementById('diagram').src="../../../images/FTT.png";
} else if (Q2Value === "true" & Q3Value === "false") {
output.innerHTML = '🤔';
document.getElementById('diagram').src="../../../images/FTF.png";
} else if (Q2Value === "false" & Q3Value === "true") {
output.innerHTML = '🧐';
document.getElementById('diagram').src="../../../images/FFT.png";
} else {
output.innerHTML = '💀';
document.getElementById('diagram').src="../../../images/blank-diagram.png";
}
break;
}
function getSelectedValue(options) {
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
return options[i].value;
}
}
return undefined;
}
-
The data in the question will be iterated, selected, and sequenced to get the value of each question. Then, the values will be evaluated using switch case statements in order to produce the correct output.
-
One piece of documentation that would be appropriate to include with my program is user instructions and comments. Overall, this makes it easy for the user to understand how the program works and improves the quality of life. With instructions they wouldn’t be confused with how the program works and what they need to do. Comments make it easy for the user to understand each part of the code that contributes to the functionality of the program.
Question 2
(a) Consider the first iteration statement included in the Procedure section of your Personalized Project Reference. Describe the condition(s) that will cause the body of the iteration statement to execute at least once.
- The first iteration statement will execute for every condition. Here is the for statement:
- for (var i = 0; i < options.length; i++)
- For every length of the amount of the options, perform the body of the function
- for (var i = 0; i < options.length; i++)
(b) Consider the procedure identified in part (i) of the Procedure section of your Personalized Project Reference. Write a call to your procedure with specific argument(s) that you could use for testing this procedure. Describe the program functionality that is related to this call.
var Q1Value = getSelectedValue(Q1Options);
var Q2Value = getSelectedValue(Q2Options);
var Q3Value = getSelectedValue(Q3Options);
- The program functionality of this is to get the value of the selected option so if question 1 is selected to true, then the value corresponds with it.
(c) Consider the list identified in the List section of your Personalized Project Reference. Explain how you would need to adjust this part of your program if the list was not included in your code.
- To add a list to the program, I would create a variable containing a list for with the values “true” and “false”. My procedure will go through all options of the questions and if true or false it selected, then the question’s certain value is set to “true” or “false” by gravving a certain idnex of the list.