Freecodecamp: Question mark in value of alt-attribute leads to failed test

Created on 28 Jul 2016  Â·  13Comments  Â·  Source: freeCodeCamp/freeCodeCamp

Challenge Add Images to your Website has an issue.
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36.

The third testing-spec, Your image element must have an alt attribute. of this Challenge breaks, as soon as the user puts a question-mark into the value of the alt-attribute.
Removing the question mark leads to a instant pass.

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;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<img src="https://bit.ly/fcc-relaxing-cat" alt="Can i haz webpagez?">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

help wanted

Most helpful comment

@Locheed @LodeScreen42 I changed the Regex to accept any character so it should be good to go once my PR gets merged and posted.

All 13 comments

@jonsensberger thanks for the issue. Yes, it appears that the test needs to account for question marks as well.

This line of code needs ot be changed.

The regex should be changed from

- /alt\\s*?=\\s*?(\\\"|\\')[\\s\\w\\.\\,\\!]+?(\\\"|\\')/
+ /alt\\s*?=\\s*?(\\\"|\\')[\\s\\w\\.\\,\\!\\?]+?(\\\"|\\')/

I'll fix this one.

Hi - Didn't work with - in alt text either

@traisen yeah, there are all sorts of special characters it doesn't work with like (, ), *, etc. Maybe we should change the Regex to accept any characters. I'm not sure

@dhcodes in that case, maybe we should just use the wildcard character to make it flexible.

Changing to accept any character might save you answering post ;)

What is the regex that HTML uses to parse alt-text? That would be the best
to use.
What I found was there is a length limit, but seems all characters are
allowed. And testing, if too long it just chops off the extra characters.

On Fri, Jul 29, 2016 at 3:30 AM, Dylan H [email protected] wrote:

@traisen https://github.com/traisen yeah, there are all sorts of
special characters it doesn't work with like (, ), *, etc. Maybe we should
change the Regex to accept any characters. I'm not sure

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/9927#issuecomment-236071583,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAfQI_vaJoj0BqoU3Hsf5QXER1cAZiV2ks5qaVehgaJpZM4JWt0T
.

But then I need to do an amend... NOOOOO j/k I need the practice.

(off topic) I'm curious: how you ended up working on the editor?

On Sat, Jul 30, 2016 at 2:17 AM, Dylan H [email protected] wrote:

But then I need to do an amend... NOOOOO j/k I need the practice.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/FreeCodeCamp/FreeCodeCamp/issues/9927#issuecomment-236324044,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAfQI7SOMUcJg4YG1Qi4N294ue6HAGYpks5qapg1gaJpZM4JWt0T
.

@traisen I'm not sure what you mean, but this isn't really the place for conversations. Look me up on the (Gitter chat)[https://gitter.im/FreeCodeCamp/FreeCodeCamp] and send me an @ mention or a PM and we can talk

I have a confirmation of similar symptoms while my alt attributes should be perfectly legal. This thread describes what I am experiencing.
(Mozilla Firefox 47.0.1; Win10(x64)

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;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>
<img src="https://bit.ly/fcc-relaxing-cat" alt="Curious kitten is looking upside-down.">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Hyphen ( - ) also breaks it. Regex fix to accept any character would be good.
@LodeScreen42 That's your problem. Remove hyphen.

@Locheed @LodeScreen42 I changed the Regex to accept any character so it should be good to go once my PR gets merged and posted.

Hyphen broke it for me too just now.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

DaphnisM picture DaphnisM  Â·  3Comments

MelissaManning picture MelissaManning  Â·  3Comments

Tzahile picture Tzahile  Â·  3Comments

jurijuri picture jurijuri  Â·  3Comments

QuincyLarson picture QuincyLarson  Â·  3Comments