Create Array of Favourite Food items objects -- JSON Data Structuring--HackerRank Solutions Fresco Play Hanson

 This is JSON validation test.

This test requires the knowledge about JSON data structuring and valid data types used.

The data should be written in data.json file.

Text to be done.

Create a JSON Array of Objects with fields

• Name
• Type
• Price

After writing the JSON data, import the json data in loopObject.js and modify the data as per your wish.

Note: 

• Have idea about the data types used in json data.
• Select Run -> Install to install the dependencies.
• Select Run -> Run Server to start your application
• Select Run -> Test to run the test cases.

Answer:

[

  {"Name":"techfreaktej.blogspot.com","Type":"Solution Provider","Price":0},

  {"Name":"techfreaktej.blogspot.com","Type":"Notes Provider","Price":0},

  {"Name":"techfreaktej.blogspot.com","Type":"Content Provider","Price":0}

]

Image for Reference:

Create JSON data with Person Object -- JSON Data Structuring HackerRank Solutions Fresco Play

This is JSON validation test.

This Test requires the knowledge about JSON data structuring and valid data types used.

The data should be written in data.json file.

Tasks to be done:

Create a JSON Object "persons" with fields

• Name
• Employee ID
• Experience
• Company
• Designation

Note: 

• Have idea about the data types used in json data.
• Select Run -> Install to install the dependencies.
• Select Run -> Run Server to start your application
• Select Run -> Test to run the test cases.

Answer:

{

  "persons":{

    "Name":"Teja",

    "EmployeeID": 12321,

    "Experience" : 3,

    "Company": "TCS",

    "Designation": "Software Engineer"

  }

}

Image for Reference:

Change datatypes and return required JSON data -- JSON schema validation HackerRank Solutions Fresco Play

 Let us consider a practical scenario 

Assume you have some data where everything is string and it represents as below: 

You have to format and return the data as below:

Basically, after getting the data you have to change Data-types and return the required JSON.

Note: 

• Have a look at JSON data before writing the code
• All the code should be written in "tindex.js" file
• Select Run -> install to install the dependencies.
• Select Run -> Run server to validate JSON schema.
• Select Run -> Test Test to validate your JSON data.

Answer:

module.exports= function(){

 

const data = require("./testdata.json");

/*Explore the JSON file and return required JSON data*/

var json = JSON.parse(data).studentData;

json.forEach(function(element, index){

  element['aggregate'] = parseInt(element['aggregate']);

  element.forEach(function(per,ind){

    per['sub1'] = parseInt(per['sub1']);

    per['sub2'] = parseInt(per['sub2']);

    per['sub3'] = parseInt(per['sub3']);

});

});

return json;

}

Screenshot for reference:

Storytelling with data Final assessment Fresco Play

1. _______ helps you get familiar with data. ------------->Exploratory aa
2. When the content is very less, we can leverage _________ to display information.----->simple text 
3. _________ uses system of color coding to represent different values.------>heat map
4. What are the visual elements that take up space but do not increase understanding?--->clutter
5. Cognitive load theory is created by __________.--->john sweller
6. What is not a part of story telling with data?--->out box thin
7. Tone of the language can be compromised.----->true
8. Which graph has very minimal use cases?---------->vertical
9. Clutter helps in increasing the communication with Audiences?---> false
10. The concept of accessibility helps people of different abilities to use designs------>true
11. Which are the different categories of Graphs?---->all the options
12. Keeping Color consistent helps the audiences to know that these two pieces of information are related.---->true
13. Which graphs are used to plot continuous data?----->bar graphas
14. Clutter helps build a comfortable user experience for your audience.---->false
15. Color can be neglected if your content is clear.------>false 
16. When using the Bar graph, the width of the Bars must be --->right side
17. If Lines are overlapping then SlopeGraph is the best to use.--->true 
18. Which graphs are used to plot continuous data?------------->slope
19. Including Zero baseline is a good practice.-------->true
20. is the most widely and commonly used graph.---------->bar
21. Clutter helps build a comfortable user experience for your audience.---------->False
22. If the data in your content is very less then _________ is best to use.---------->Simple Text
23. Decluttering should be done only when we have Ticket processing? ----------> False
24. With this principle, we tend to think of objects that are physically close together as belonging to part of a group. Which principle is explained here? ----------> Proximity
25. The concept of accessibility helps people of different abilities to use designs.----------> True
26. If Lines are overlapping then SlopeGraph is the best to use.---------->True
27. Which graph is useful when you have two time periods or points of comparison and want to quickly show relative increases and decreases? ----------> Line Graph
28. Which graph displays data in top-to-bottom fashion? ----------> Horizontal Bar
29. Clutter helps in increasing the communication with Audiences? ----------> False
30. Which graphs are used to plot continuous data? ----------> Line Graphs
31. Keeping Color consistent helps the audiences to know that these two pieces of information are related.---------->True
32. Using Tables during Live presentations is a good option.----------> False
33. Which are the different categories of Graphs? ---------->All the options
34. Turning on the rulers or gridlines that are built into most of the software programs helps in aligning Elements. ----------> True
35. What is not a part of story telling with data? ----------> Out of Box thinking
36. __________ is the most widely and commonly used graph.----------> Bar graph
37. ________ helps you establish a structure for your communication.----------> Storyboarding
38. Which among these will best suit representing Appendix or link for references? ----------> Tables
39. __________ is not a step in the process of decluttering. ----------> Remove color
40. What helps you show differences across various categories between the two data points?----------> Slopegraph
 

_______ helps you get familiar with data.

 _______ helps you get familiar with data.

1) Both the options

2) Exploratory analysis

3) Explanatory Analysis

Answer: Exploratory analysis helps you get familiar with data.

When the content is very less, we can leverage _________ to display information.

 When the content is very less, we can leverage _________ to display information.

1) Graphs

2) Tables

3) Simple Text

Answer: When the content is very less, we can leverage Simple Text to display information.

_________ uses system of color coding to represent different values.

 _________ uses system of color coding to represent different values.

1) Simple Text

2) Heat Map

3) Graphs

4) Tables

Answer: Heat Map uses system of color coding to represent different values.

____________ enables continuous value delivery.

 ____________ enables continuous value delivery.

1) Continuous Integration

2) Automation

3) Enterprise Alignment

Answer: Automation enables continuous value delivery.

Continuous Management (CM) and Continuous Integration (CI) Quiz Fresco Play

 Q.1 ____________ is an attribute that describes an environment.

1)  All of the options

2) Middleware configuration

3) Test configuration

4) Continuous deployment

Ans: 2) Middleware configuration

Test your Hypothesis and Chi-Squared test- HackerRank HandsOn - Probability and Statistics - 8

Test your Hypothesis and Chi-Squared test

The table shows the contingency table of marital status by education. Use the Chi-Squared Test for testing Homogeneity.

Marital Status	Middle School	High School	Bachelor	Masters	PhD
Single	18	36	21	9	6
Married	12	36	45	36	21
Divorced	6	9	9	3	3
Widowed	3	9	9	6	3

Probability and Statistics - 7 Problem statement HackerRank handsOn Fresco Play Solution

• On new Year's Eve, the probability of a person having a car accident 0.09. The probability of a person driving while intoxicated is 0.32 and the probability of a person having a car accident while intoxicated is .15.
• What is the probability of a person driving while intoxicated or having a car accident?
• Probabilities:

1. P(accident)=0.09
2. P(intoxicated)=0.32
3. P(accident and intoxicated)=0.15

Note:

1. Return the probability in decimal rounded off to 2 decimal places
2. Hint: Use Addition rule and Non-Mutually Exclusive

Function Description

Function Name: accident()

1. Output:

• ans: Float  - Denoting probability of a person driving while intoxicated or having a car accident?

Answer:

from scipy import stats

def accident():

    '''

    output: ans : Float

    '''

    #Write your code here

    #Assign the probability value to the variable ans. Round off to 2 decimal places

    accident = 0.09

    intoxicated = 0.32

    ai = 0.15

    

    prob =(accident+intoxicated)-ai

    

    ans=round(prob,2)

    

    return ans

if __name__=='__main__':

Click on the tested image:

Probability and Statistics - 6 Problem Statement - HackerRank hands on - Fresco Play

Problem Statement

• A spinner has 4 equal sectors with tour options Dubai, Seoul, Switzerland, and Paris.
• P(Seoul)=1/4  p(Paris)=1/4 P(Dubai)=1/4 p(Switzerland)=1/4
• What is the probability of landing on Seoul or Paris after spinning spinner?
  
• Write a function to return the probability

Note:

1. Display the probability in decimal rounded off to 2 decimal places
2. Hint: Addition Rule and Mutually Exclusive events

Function Description

Function Name: spinner()

1. Output:

• ans: Float - Denotes the probability

Answer:

from scipy import stats

def spinner():

    '''

    output: ans : Float

    '''

    #Write your code here

    seoul = 1/4

    paris = 1/4

    dubai = 1/4

    swit = 1/4

    

    prob = 1-(seoul+paris)

    #Assign the probability value to the variable ans

    # Round off to 2 decimal places

    ans=round(prob,2)

    

    return ans 

if __name__=='__main__':

    print(spinner())

Click on the tested image:

HTML5 Final Assessment HackerRank Solution Fresco Play

1. HTML5 tags are case sensitive.

1) Yes

2) No

Ans: 2) No

html5 - api - quiz fresco play hackerrank solutions

Q.1 The following are LocalStorage functions, except ________

1) setItem()

2) removeItem()

3) getItem()

4) getElementbyID()

Ans: 4) getElementbyID()

html5 quiz on Canvas ans SVG hackerrank fresco play

Q.1 SVG is mostly useful for vector type diagrams like _________

1) Charts and 3D Graphs

2) 2D Graphs

3) 3D Graphs

4) Charts and 2D Graphs

Ans: 4) Charts and 2D Graphs

Html5-canvas - Embed a Canvas of width 600 and height 400 in your HTML5 page- HackerRank Hands-on Fresco Play

Embed a Canvas of width 600 and height 400 in your HTML5 page. Draw a red rectangle of width 200 and height 100 on the canvas, leaving a margin of 20 on both x axis and y axis.

Add a stroke using 'strokeRect' method.

Steps to do hands-on:

1. install the required packages by clicking the install button
2. write the code
3. run the application and test it

Answer:

<!DOCTYPE html>

<html>

<head>

  <link rel="icon" href="favicon.png" type="image/png">

  <title>Destiny</title>

  <link href="mystyle.css" rel="stylesheet" type="text/css">

  <script>

    function draw(){

      var ctx = document.getElementById('my_canvas').getContext('2d');

      ctx.strokeRect(20, 20, 200 , 100);

      ctx.strokeStyle = "#FF0000";

    }

    window.onload=draw;

  </script>

</head>

<body>

  <canvas id="my_canvas" height="400" width="600"></canvas>

</body>

</html>

click on tested image:

HTML5 Multimedia Fresco Play HackerRank- HTML5 semantic elements

Q.1 The controls attribute adds audio/video controls like PLAY, PAUSE and VOLUME.

1) False

2) True

Ans: 2) True

html5-video player- Embed a video in your HTML5 page with a width of '320' and height of '200' with controls displayer HackerRank Handson

Embed a video in your HTML5 page with a width of '320' and height of '200' with controls displayer. Now, try to do the following:

• Auto-replay the video
• Preload the video
• Display image while the video loads

use

"https://cdn12.picryl.com/photo/2016/12/31/lego-stones-plastic-education-8b9a7d-1024.jpg" as the display image

Steps to do hands-on:

1. install the required packages by clicking the install button
2. write the code
3. run the application and test it

Answer:

<!DOCTYPE html>

<html>

<head>

  <link rel="icon" href="favicon.png" type="image/png">

  <title>Destiny</title>

  <link href="mystyle.css" rel="stylesheet" type="text/css">

</head>

<body>

 //write your code here

   <video autoplay height="200" width="320">

    <source src="video.mp4">

   </video>

    <video controls preload height="200" width="320">

      <source src="video.mp4">

    </video>

    <video autoplay height="200" width="320"

     poster="https://cdn12.picryl.com/photo/2016/12/31/lego-stones-plastic-education-8b9a7d-1024.jpg">

      <source src="video.mp4">

    </video>

</body>

</html>

Note: poster is written in very low font because of insufficient page width

Click on tested image

html5-music player - Embed an audio file to three different audio players on your HTML5 page with controls HackerRank hands-on Fresco Play

 Embed an audio file to three different audio players on your HTML5 page with controls and implements the following characteristics respectively:     

• regular player
• Preload the audio(browser should NOT load the audio file when the page loads)
• Run the  audio in a loop

Steps to do hands-on:

1. install the required packages by clicking the install button
2. write the code
3. run the application and test it

Answer:

<!DOCTYPE html>

<html>

<head>

  <link rel="icon" href="favicon.png" type="image/png">

  <title>Destiny</title>

  <link href="mystyle.css" rel="stylesheet" type="text/css">

</head>

<body>

 // write your code

 <p>

 <audio controls>

  <source src="SampleAudio.mp3" type="audio/mpeg">

</audio>

 <audio controls="" preload='none'>

  <source src="SampleAudio.mp3" type="audio/mpeg">

</audio>

 <audio controls="" loop=''>

  <source src="SampleAudio.mp3" type="audio/mpeg">

</audio>

 </p>

</body>

</html>

Click on test image:

Input Control Types - quiz HackerRank hands on Fresco Play

Q.1 Which Semantic element is best suitable for content, like a blog post, that is self-contained, independent, and can be republished?

1) div

2) section

3) article

4) aside


Ans: 3) article

html5-registration Design a registration form with appropriate input control types

Design a registration form with appropriate input control types

Use datalist for country field

Steps to do hands-on:

1. install the required packages by clicking the install button
2. write the code
3. run the application and test it

Answer:

<!DOCTYPE html>

<html>

<head>

  <link rel="icon" href="favicon.png" type="image/png">

  <title>Destiny</title>

  <link href="mystyle.css" rel="stylesheet" type="text/css">

</head>

<body>

 //write your code here

 <header><h1>Registration Form</h1></header>

 <div id="container">

   <form action="">

     <label for="name">Name:</label>

     <input type="text" name="name"><br><br>

     <label for="dob">Name:</label>

     <input type="date" name="dob"><br><br>

     <label for="country">country:</label>

     <input list="country" name="country" id="country">

     <datalist id="country">

       <option value="India">

        <option value="United States">

        <option value="United Kingdon">

        <option value="Austraila">

      <option value="France">

     </datalist><br><br>

      <label for="phone">Phone number:</label>

     <input type="tel" name="phone"><br><br>

      <label for="email">Email:</label>

     <input type="email" name="email"><br><br>

      <label for="web">website:</label>

     <input type="url" name="web"><br><br>

     <button type="submit"><a href="">Submit</a></button>

   </form>

 </div>

</body>

</html>

Click on image to view test result:

html5-footer in fresco play HackerRank handson -- Create a footer using html5 semantic tag "footer"

 Create a footer using html5 semantic tag "footer"

Steps to do hands-on:

1. install the required packages by clicking the install button
2. write the code
3. run the application and test it

Answer:

<!DOCTYPE html>

<html>

<head>

  <link rel="icon" href="favicon.png" type="image/png">

  <title>Destiny</title>

  <link href="mystyle.css" rel="stylesheet" type="text/css">

</head>

<body>

  <footer><p>Copyright @TCS 2016</p></footer>

</body>

</html>

html5-navigation HackerRank Handson Design a navigation menu using html5 semantic tag

 Design a navigation menu using html5 semantic tag <nav>

Steps to do hands-on:

1. install the required packages by clicking the install button
2. write the code
3. run the application and test it

Answer:

<!DOCTYPE html>

<html>

<head>

 

 

  <link href="mystyle.css" rel="stylesheet" type="text/css">

</head>

<body>

    <nav>

      <a href="">Home</a>

      <a href="">Blogs</a>

      <a href="">Videos</a>

      <a href="">About Me</a>

    </nav>

</body>

</html>

Click on the tested image:

html5-header - Create a header using html5 semantic tag "header"

 Create a header using html5 semantic tag "header"

Answer: 

Steps: Install>>Run>>and then  Test

<!DOCTYPE html>

<html>

<head>

  <link rel="icon" href="favicon.png" type="image/png">

  <title>Destiny</title>

  <link href="mystyle.css" rel="stylesheet" type="text/css">

</head>

<body>

 //write your code here

    <header>WELCOME TO MY PAGE</header>

</body>

</html>

Image: