Row 1:

Video:

  • input
  • program functionality
  • Output

Written:

  • describes the overall purpose of the program.
  • describes what functionality of the program is demonstrated in the video.
  • describes the input and output of the program demonstrated in the video.

My Response:

  • This program’s purpose is to help women find remedies to their period symptoms and build a community where women can share what remedies work for them and help others
  • This program’s function is to provide a comment section where people can input the symptom they are addressing as well as the remedy for that symptom and check off the symptoms they experience in the checkbox to find remedies and products that can help
  • In the video, the user imputed the symptom they were addressing, cramps, and a remedy that worked for them which was tylenol. When the user clicked ‘post’ and ‘see all comments’, their comment was there even when the page was refreshed, the user’s comment was also saved into the database. The input was the symptom she imputed which was cramp, as well as the comment she imputed, which was tylenol, and the output was the same thing but displayed in the comments table. The comment is then stored in the database as a list

Row 2:

  • one code segment that shows the data in this same list being used as part of fulfilling the program’s purpose.
  • one code segment that identifies the name of the variable representing the list being used in this response.
  • describes what the data contained in this list is representing in the program.

My Response: The data contained in ‘myObj’ is the symptom and comment that is being added into the comment section to give other people advice on helping ease their period symptoms

function addData(){
    if(document.getElementById("symptoms").value&&document.getElementById("comment-box").value){
      myObj = { "symptom":document.getElementById("symptoms").value, "comment":document.getElementById("comment-box").value};
      //alert(document.getElementById("symptoms").value);
      //alert(document.getElementById("comment-box").value);
      add_row(myObj);
    }
  }

Row 3:

  • includes a program code segment that shows a list being used to manage complexity in the program.
  • explains how the named, selected list manages complexity in the program code by explaining why the program code could not be written, or how it would be written differently, without using this list.

My Response:

  • This list 'myObj' manages complexity and the program code could not be written without it because getting the value of the symptom and the comment is needed to save them both in to the database. You could write two separate functions to add symptom and comment into a database, but it wouldn't be as concise, might lead to more errors in the code, and the inputs might not be stored together in the database which could also be confusing.
function addData(){
    if(document.getElementById("symptoms").value&&document.getElementById("comment-box").value){
      myObj = { "symptom":document.getElementById("symptoms").value, "comment":document.getElementById("comment-box").value};
      //alert(document.getElementById("symptoms").value);
      //alert(document.getElementById("comment-box").value);
      add_row(myObj);
    }
  }

Row 4:

  • a code segment showing a student-developed procedure with at least one parameter that has an effect on the functionality of the procedure.
  • one code segment showing where the student-developed procedure is being called.
  • describes what the identified procedure does and how it contributes to the overall functionality of the program.

My Response:

  • The first function "fHide" hides all the hyperlinks when you first click on the page by using a for loop to go through all the hyperlinks and changing their visibility to hidden.

  • Then the second function "fDisplay" also uses a for loop that goes through the checklist and looks for the ones that are checked. If it is checked, then it will change the visibility from hidden to not hidden, but if it is not checked, it will remain hidden.

// this function hides all the links at first
fHide(1, 11);
function fHide(startIndex, endIndex) {
  for (var i = startIndex; i <= endIndex; i++) {
    document.getElementById("s" + i).style.visibility = "hidden";
  }
}
// when this function is called, it will display the remedies to the symptoms that have been checked
function fDisplay(startIndex, endIndex, checkboxPrefix) {
  for (var i = startIndex; i <= endIndex; i++) {
    var checkboxId = checkboxPrefix + i;
    var element = document.getElementById("s" + i);
    if (document.getElementById(checkboxId).checked) {
      element.style.visibility = "";
    } else {
      element.style.visibility = "hidden";
    }
  }
}

Row 5:

  • includes a program code segment of a student developed algorithm that includes sequencing, selection, and iteration
  • explains in detailed steps how the identified algorithm works in enough detail that someone else could recreate it.


My Response:

  • For my function ‘fDisplay’, I used a for loop(iteration) and set the variable i to 1 and added one to i each time it ran until i reached 12. This results in the function checking all 11 of the symptoms in my checkbox and checking them for a certain condition. I then used an if statement(selection) to check if the checkboxes were checked off or not. If the condition of it being checked came out to be true, then the visibility of the corresponding hyperlink to that symptom would become visible. If not, the corresponding hyperlink to that symptom would remain hidden.
// when this function is called, it will display the remedies to the symptoms that have been checked
function fDisplay(startIndex, endIndex, checkboxPrefix) {
    for (var i = startIndex; i <= endIndex; i++) {
      var checkboxId = checkboxPrefix + i;
      var element = document.getElementById("s" + i);
      if (document.getElementById(checkboxId).checked) {
        element.style.visibility = "";
      } else {
        element.style.visibility = "hidden";
      }
    }
  }

Row 6:

  • describes two calls to the selected procedure identified in written response. Each call must pass a different argument(s) that causes a different segment of code in the algorithm to execute.
  • describes the condition(s) being tested by each call to the procedure.
  • identifies the result of each call.


My Response:

  • fHide is called at the beginning of the code so that right as you click on the page all the hyperlinks start off being invisible. The result of this call is the hyperlinks becoming invisible

  • fDisplay is called when you press the ‘See Remedies to Button’ so it gives you the link to the remedy of your symptom(s) after you submit your checklist. The conditions being tested in this call is whether or not the checkbox is checked. The result is it outputting the hyperlinks to the remedies to the corresponding symptoms that have been checked off

<button type="button" id=rem onclick ="fDisplay(1, 11, 'chk')" style = "color: white"><font color="darkred"> See Remedies To:</font></button>

lists: database, json, api