test(curriculum): check tests against solutions (#27716)
This commit is contained in:
Valeriy
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
793621594a
commit
591309550b
@@ -104,7 +104,63 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
</section>
|
||||
|
||||
@@ -88,7 +88,34 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target4").html('<em>#target4</em>');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
</section>
|
||||
|
||||
@@ -74,7 +74,35 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
|
||||
@for $i from 1 through 5 {
|
||||
.text-#{$i} { font-size: 10px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
|
||||
```html
|
||||
<style type='text/sass'>
|
||||
|
||||
@for $i from 1 to 6 {
|
||||
.text-#{$i} { font-size: 10px * $i; }
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<p class="text-1">Hello</p>
|
||||
<p class="text-2">Hello</p>
|
||||
<p class="text-3">Hello</p>
|
||||
<p class="text-4">Hello</p>
|
||||
<p class="text-5">Hello</p>
|
||||
```
|
||||
</section>
|
||||
|
||||
@@ -11,7 +11,7 @@ challengeType: 6
|
||||
Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the <code>attr()</code> method to add any HTML attribute to an element, including a class name.
|
||||
The <code>attr()</code> method works the same way that <code>style()</code> does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of "container" to a selection:
|
||||
<code>selection.attr("class", "container");</code>
|
||||
|
||||
|
||||
Note that the "class" parameter will remain the same whenever you need to add a class and only the "container" parameter will change.
|
||||
</section>
|
||||
|
||||
@@ -74,7 +74,27 @@ tests:
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
.attr("class","bar");
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
// Add your code below this line
|
||||
.attr("class","bar");
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
</section>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Fractran
|
||||
id: 5a7dad05be01840e1778a0d1
|
||||
challengeType: 3
|
||||
challengeType: 5
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Reference in New Issue
Block a user