1/18/22, 11:15 AM Module 11 Challenge Module 11 Challenge Start Assignment Due 23 Jan by 23:59 Points 100 Submitting a text entry box or a website url Background Dana’s webpage and dynamic table are...

1 answer below »

1/18/22, 11:15 AM Module 11 Challenge















Module 11 Challenge


Start Assignment



Due 23 Jan by 23:59 Points 100 Submitting a text entry box or a website url



Background


Dana’s webpage and dynamic table are working as intended, but she’d like to provide a more in-depth analysis of UFO sightings by allowing users to lter for multiple criteria at the same time. In addition to the date, you’ll add table lters for the city, state, country, and shape.


What You're Creating


This new assignment consists of one technical analysis deliverable and a written report. You will submit the following deliverables:


Deliverable 1: Filter UFO sightings on multiple criteria
Deliverable 2: A written report on the UFO analysis (README.md)


Files


Use the following links to download the Challenge starter code.


Download the starter code. (https://2u-data-curriculum- team.s3.amazonaws.com/dataviz-online/module_11/ufo_starterCode.js)



https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 1/11


1/18/22, 11:15 AM Module 11 Challenge


Deliverable 1: Filter UFO sightings on multiple criteria (80 points)


Deliverable 1 Instructions


Using JavaScript and HTML, you’ll modify the code in your index.html le to create more table lters. In addition to the date lter you created in this module, you’ll add lters for the city, state, country, and shape, as shown in the following image:


Using JavaScript, you’ll replace the handleClick() function in your
app.js le with a new function that saves the element, value, and id of the


lter that was changed. Then, you’ll create a new function to loop through the dataset and keep only the results that match the search criteria. The webpage will be updated with the search criteria after pressing "Enter".


REWIND


https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 2/11


1/18/22, 11:15 AM Module 11 Challenge


Follow the instructions below and the numbered comments in the starter code to complete Deliverable 1.


1. Download the ufo_starterCode.js , rename it app.js , and place it in the js folder of your UFOs GitHub repository. The starter code includes the code used to populate the table from this module.


NOTE


Before you rename the ufo_starterCode.js le, we suggest that you rename the app.js you created in this module as app_1.js or


For this deliverable, you’ve already done the following in this module:


Lesson 11.1.3: Use console.log() to debug code Lesson 11.2.2: Create variables with var and let Lesson 11.2.4: Use d3.select()
Lesson 11.3.1: Use JavaScript functions


Lesson 11.3.3: Use arrow functions


Lesson 11.5.2: Use forEach() with JavaScript objects


Lesson 11.5.3: Use lters with d3.select()


Lesson 11.5.4: Write if-else statements


Lesson 11.6.1: Add , , and input tags to add ltered data to an le


Lesson 11.6.2: Add the script tags for your code to an index.html le


list-group-item class

label


index.html


https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 3/11


1/18/22, 11:15 AM Module 11 Challenge


something similar to avoid using the wrong le for the Challenge.


2. In the index.html le, remove the list (



  • ) element that creates the button.




    1. Create four more list elements: city, state, country, and shape. These will be similar to the "Enter Date" list element. Each element should have the same "id" as the object properties in the data.js le.




    2. In Step 1 of the app.js le, create an empty filters variable to keep track of all the elements that change when a search is entered. This variable will be used in Step 5 to store the property “id” and the value that was entered from user input.




    3. Next, you will need to write code for two functions whose names we’ve provided in the starter code, updateFilters() and


      filterTable() .
      The updateFilters() function will replace your handleClick()


      function and update the filters variable you created in Step 1. The filterTable() function will lter the table data by the value


      that is entered for the "id" that has changed.




    . For Step 2, located before the buildTable(tableData) function at the end of the starter code, modify the event listener from this module so that it detects a "change" on each input element and calls the


    updateFilters() function.


    7. In Step 3, we’ve provided the function, updateFilters() . Inside this function, you’ll write code in Steps 4-5 to update the lters based on user input.


    . In Step 4a, create a variable that saves the element that was changed using d3.select(this) .


    https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 4/11


    1/18/22, 11:15 AM Module 11 Challenge




    1. In Step 4b, create a variable that saves the value of the changed element’s property.




    2. In Step 4c, create a variable that saves the attribute of the changed element’s id.




    3. In Step 5, write an if-else statement that checks if a value was changed by the user (variable from Step 4b). If a value was changed, add the element’s id (variable from Step 4c) as the property and the value that was changed to the filters variable you created in Step 1. If a value was not entered, then clear the element id from the filters variable.




    If you’d like a hint on how to update the lters based on user input, that’s totally okay. If not, that’s great too. You can always revisit this later if you change your mind.




    1. In Step 6, inside the updateFilters() function, call the filterTable() function that will be used in Step 7.




    2. In the filterTable() function in Step 7, write code to lter the table based on the user input that is stored in the filters variable.




    3. In Step 8, create a variable for the ltered data that is equal to the data that builds the table. This variable will hold the updated table data based on the user input.




    4. In Step 9, loop through the lters object and store the data that matches the lter values in the variable created in Step 8.




    SHOW HINT


    https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 5/11


    1/18/22, 11:15 AM Module 11 Challenge


    1. In Step 10, rebuild the table with the ltered data by passing the variable created in Step 8.


    17. Deploy the web app on your GitHub pages.


    Deliverable 1 Requirements


    You will earn a perfect score for Deliverable 1 by completing all requirements below:


    The list element that creates the button is removed, and there are ve list elements for ltering in the index.html le. (20 pt)


    The event listener is modied to detect changes to each lter in the app.js le. (10 pt)


    The updateFilters() function saves the element, value, and the id of the lter that was changed. (20 pt)


    The filterTable() function loops through all of the lters and keeps any data that matches the lter values. (20 pt)


    The webpage lters the table correctly based on user input. (20 pt)


    Deliverable 2: A written report on the UFO analysis (README.md) (20 points)


    Initialize your repository with a README, and write your analysis of Deliverable 1.


    Deliverable 2 Instructions


    For your written analysis, be sure to use complete and coherent sentences. Your written analysis should contain three sections, which cover the following:


    https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 6/11


    1/18/22, 11:15 AM Module 11 Challenge


    1. Overview of Project: Explain the purpose of this analysis.


    2. Results: Describe to Dana how someone might use the new webpage by walking her through the process of using the search criteria. Use images of your webpage during the ltering process to support your explanation.


    3. Summary: In a summary statement, describe one drawback of this new design and two recommendations for further development.


    Deliverable 2 Requirements
    Structure, Organization, and Formatting (8 points)


    The written analysis has the following structure, organization, and formatting:


    There is a title, and there are multiple paragraphs. (2 pt)
    Each paragraph has a heading. (2 pt)
    There are subheadings to break up text. (2 pt)
    Images are formatted and displayed where appropriate. (2 pt)


    Analysis (12 points)


    The written analysis has the following: 1. Overview of the analysis:


    The purpose is well dened (2 pt) 2. Results:


    There is a description of how to perform a search, with images.


    (4 pt)


    3. Summary:


    https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 7/11


    1/18/22, 11:15 AM Module 11 Challenge


    The summary addresses one drawback of this webpage (2 pt) The summary addresses two additional recommendations for


    further development (4 pt)


    Submission


    Once you’re ready to submit, make sure to check your work against the rubric to ensure you are meeting the requirements for this Challenge one nal time. It’s easy to overlook items when you’re in the zone!


    As a reminder, the deliverables for this Challenge are as follows:


    Deliverable 1: Filter UFO sightings on multiple criteria
    Deliverable 2: A written report on the UFO analysis (README.md)


    Upload the following to your UFOs GitHub repository:


    1. The updated app.js le with the code for the challenge. 2. The updated index.html le.
    3. The data.js le.
    4. An updated README.md that has your written analysis


    To submit your challenge assignment in Canvas, click Submit, then provide the URL of your UFOs GitHub repository for grading. Comments are disabled for graded submissions in BootCampSpot. If you have questions about your feedback, please notify your instructional staff or the Student Success Manager. If you would like to resubmit your work for an improved grade, you can use the Re-Submit Assignment button to upload new links. You may resubmit up to 3 times for a total of 4 submissions.


    https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 8/11


    1/18/22, 11:15 AM Module 11 Challenge


    Once you receive feedback on your Challenge, make any suggested updates or adjustments to your work. Then, add this week’s Challenge to your professional portfolio.


    NOTE


    You are allowed to miss up to two Challenge assignments and still earn your certicate. If you complete all Challenge assignments, your lowest two grades will be dropped. If you wish to skip this assignment, click Next, and move on to the next Module.


    IMPORTANT


    Module-11 Rubric


    https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 9/11


    1/18/22, 11:15 AM Module 11 Challenge


    Criteria Ratings Pts


    Deliverable 1: Filter UFO Sightings on Multiple Criteria


    80 to >72.0 Pts Mastery


    The index.html file has the following: The list element for the button is removed. ALL FIVE list elements for filtering are created. The app.js file has the following:


    The event listener is modified to detect changes to ALL FIVE filters. The updateFilters() function saves the element, value, and the id


    72 to >66.0 Pts Approaching Mastery


    The index.html file has the following: The list element for the button is removed. FOUR of FIVE list elements for filtering are created. The app.js file has the following:


    The event listener is modified to detect changes to FOUR of FIVE filters. The updateFilters() function saves the element,


    66 to >60.0 Pts Progressing


    The index.html file has the following: The list element for the button is removed.


    THREE of FIVE list elements for filtering are created. The app.js file has the following:


    The event listener is modified to detect changes to THREE of FIVE filters The updateFilters() function saves the element,


    60 to >0.0 Pts Emerging


    The index.html file has the following: The list element for the button is removed.


    TWO of FIVE list elements for filtering are created. The app.js file has the following:


    The event listener is modified to detect changes to TWO of FIVE filters. The updateFilters() function saves the element, value, and the id


    0 Pts Incomplete


    80 pts


    Deliverable 2: Structure, Organization, and Formatting


    of the filter that


    value, and the id


    value, and the id


    of the filter that


    8 to >7.0 Pts wMastcehraynged.


    7 to >6.0 Pts Aopf pthroeaficltheirntghat


    6 to >4.0 Pts Porfotgherefsilsteinr gthat


    4 to >0.0 Pts Ewmaesrcghinagnged,


    The
    The written


    filterTable() analysis has


    function loops ALL of the


    through all of following:


    the filters and There is a


    keeps any data title, and there


    that matches the are multiple


    filter values. paragraphs.


    The webpage Each


    filters the table paragraph has


    based on user a heading.


    input. There are


    subheadings. Images are


    correct and displayed where appropriate.


    was changed,


    was changed, The written


    with two minor analysis has ALL


    errors. The of the following:


    filterTable() There is a title,


    function loops and there are


    through all of the multiple


    filters and keeps paragraphs.


    any data that Each


    matches the filter paragraph has a


    values, with two heading. AND


    minor errors. ONE of the


    The webpage following:


    filters the table There are


    based on user subheadings.


    input. Images are


    correct and displayed where appropriate.


    with three or The written


    more minor analysis has ALL


    errors. The of the following:


    filterTable() There is a title,


    function loops and there are


    through all of multiple


    the filters and paragraphs.


    keeps any data AND ONE of the


    that matches following: Each


    the filter values, paragraph has a


    with three or heading. There


    more minor
    are subheadings.


    errors. The Images are


    webpage filters correct and


    the table based displayed where


    on user input. appropriate.


    Mastery


    with one minor The written


    error. The analysis has ALL


    filterTable()
    of the following:


    function loops There is a title,


    through all of the and there are


    filters and keeps multiple


    any data that paragraphs.


    matches the filter Each


    values, with two paragraph has a


    minor errors. heading. There


    The webpage are subheadings.


    filters the table Images are


    based on user correct and


    input. displayed where


    appropriate, but with one or two minor errors.


    0 Pts Incomplete


    8 pts


    https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 10/11


    ✓✓ ✓✓✓




    ✓✓✓


    ✓ ✓


    ✓ ✓✓


    ✓✓


    ✓ ✓✓ ✓


    ✓✓ ✓✓


    ✓✓ ✓✓


    ✓✓✓


    ✓ ✓✓✓


    ✓✓






    1/18/22, 11:15 AM Module 11 Challenge


    Criteria Ratings Pts


    Deliverable 2: Analysis


    12 to >10.0 Pts Mastery


    The Deliverable
    Fulfills
    "Emerging"
    Required Criteria:
    AND has the
    following: The
    summary
    addresses a
    drawback of the
    design. The
    summary has
    TWO
    recommendations
    for furt©he2r020 - 2022 TrTilWogOy Education Serviceresc, oam2Um,eIndc.abtiroansd. All Rights Reserved. development. recommendations for further


    for further development. development.


    10 to >8.0 Pts Approaching Mastery


    8 to >6.0 Pts Progressing


    6 to >0.0 Pts Emerging


    The Deliverable Fulfills "Emerging" Required Criteria: AND has at least ONE of the following: summary addresses a drawback of the design. The summary has


    The Deliverable Fulfills "Emerging" Required Criteria: AND has at least ONE of the following: summary addresses a drawback of the design. The summary has ONE of TWO


    REQUIRED: The


    purpose is well defined.


    The


    The


    The description of how the search criteria works is well described with images.


    0 Pts Incomplete


    12 pts


    Total points: 100


    https://courses.bootcampspot.com/courses/967/assignments/19023?module_item_id=345941 11/11

    Answered 1 days AfterJan 18, 2022

    Answer To: 1/18/22, 11:15 AM Module 11 Challenge Module 11 Challenge Start Assignment Due 23 Jan by 23:59...

    Ruchi answered on Jan 20 2022
    107 Votes
    SOLUTION.PDF

    Answer To This Question Is Available To Download

    Related Questions & Answers

    More Questions »

    Submit New Assignment

    Copy and Paste Your Assignment Here