Issue 1:
I, as well as many others, have noticed a substantial amount of specs (tests) that are misleading and/or confusing.

The reason why I made this huge issue thread, is because this is a large amount of work, and specs needs to be written after certain rules, that are easy to follow and understand for any level of skill.

This is more of a discussion towards a solution to re-write current specs, and write future specs to cut down on issues, which aren't bugs but simply bad understading of a specific task, specified by a description and/or spec.

Currently some of the dilemmas with the current specs are:

The major of specs are misleading and lack of detail

Specs that does not give enough information makes a waypoint difficult to solve—not even based on experience, but overall solution.

Add two div elements inside your div class="well"> element both with the class col-xs-6.

Taken from the Create Bootstrap Wells waypoint.

The spec contradicts with it's description.

Bootstrap has a class called well that can create a visual sense of depth for your columns. Nest one div element with the class well within each of your col-xs-6 div elements.

Some specs promotes bad practice, by bad implementation

This is already described in issue #2306 and should be entirely rethought. Testing syntax rather than behavior leads to unpredictable results (as show in the issue). This also promotes bad practices as not allowing code to be DRY, forcing the user to write a code a specific, predefined way.

This discussion is another one entirely, which should not be taken up in this dicussion, as it is a fundamental change to specs that does this, which needs to test for unpredictable results based on given assignment of the waypoint.

Specs are written in wrong formats

An example is the [http://www.freecodecamp.com/challenges/waypoint-manipulate-arrays-with-pop](Manipulate Arrays With pop) waypoint.

assert((function(d) {
if (d[0] == 'John' && d[1] == 23 && d[2] == undefined) {
return(true);
} else {
return(false);
}
})(myArray), 'myArray should only have the first two values left(["John", 23])');

myArray should only have the first two values left(["John", 23])

The variable name myArray could be changed and is not even tested, so it should not be part of the assert message. Consider

Should only contain the first two values.

The waypoint could also be cleaned up and remove the enclosed function and the comments that should be in the description and specs:

var myArray = ["John", 23, ["cat", 2]];
var removed = myArray;

test(myArray, removed)

It's less cumbersome for beginners, and a lot cleaner by keeping the rules in specs and how-tos in description.

Also the specs could leverage the use of testing frameworks such as Jasmine, or simply tape. This would allow specs to be written as

// tape
t.plan(2)
t.same(myArray, ["John", 23], 'Should only contain the first two values')
t.same(removed, ["cat", 2], 'Should contain the removed array')

// jasmine
it('should only contain the first two values', function () {
expect(myArray).toEqual(["John", 23])
})

it('should only contain the removed array', function () {
expect(removed).toEqual(["cat", 2])
})

This is incomplete, and will change over time as issues are being opened.

Issue 2:
Challenge Call out Optional Actions with Button Info has an issue.

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36.

Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

<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. ">
<button class="btn btn-block btn-primary">Like</button>
<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>

I'm working with the editor in these dang challenges. These dang challenges have a dang bad editor. This dang bad editor keeps making me have weird issues in changing the position of my dang cursor. Please fix this dang problem dang immediately.