Most common incorrect answers for step-1 #54024

ahmaxed · 2024-03-08T08:22:19Z

Describe the Issue

Here is the list of the most common incorrect answers for learn-html-by-building-a-cat-photo-app/step-1

editable_file_contents	unique_user_count
`<html><body><h1>Hello World</h1></body></html>`	57672
`<html><body><CatPhotoApp>Hello World</CatPhotoApp></body></html>`	4829
`<html><body><CatPhotoApp>Hello World</h1></body></html>`	3114
`<html><body><h1>CatPhotoApp</h1></body></html>`	1988
`<html><body><h1>Cat Photo App</h1></body></html>`	1829
`<html><body><h1>Hello World</h1><h1>CatPhotoApp</h1></body></html>`	857
`<html><body><CatPhotoApp>Hello World<CatPhotoApp></body></html>`	825
`<html><body><h1>Hello World</CatPhotoApp></body></html>`	823
`<html><body><h1>Hello World</h1></body></html>`	479
`<html><body><h1>CatPhotoAppp</h1></body></html>`	389

To see the indentations and line breaks: https://docs.google.com/spreadsheets/d/1P4a1kfRIVk5Q9pfuIqsoF3cQc6ehQiMST4ISArtbvSc/edit?usp=sharing

Considerations:

The right answer is also included in the failed variations. Either google analytics is misfiring, or there is an issue with our evaluations logic extensions, tests, browser extensions, etc.
It seems like a lot of users are confused about the placement of CatPhotoApp
Adding a copy button feature for the code blocks might help with reducing the misspellings of CatPhotoApp
Having the default seed as the wrong answer could mean users are just testing the UI. I could AB test disabling the button if seed does not change and see if there is an improvement in user behaviour.

Goals:

Reducing the bounce rate ( people leaving the platform ) on the entry challenges is highly critical. Increasing the percentage of the people who go to the next challenge would significantly increase all of our metrics.

Suggestions

Oliver suggested changing the instructions to say 'change its text from "Hello World" to "CatPhotoApp"' should clarify it a bit further.

Other suggestions? I am all hears.

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-1

Tasks

Give feedback

update instruction
investigate why correct answers are failing
write tests for common variations (after the new instrucstions are in)
Options

The text was updated successfully, but these errors were encountered:

ojeytonwilliams · 2024-03-08T09:03:57Z

Thanks, Ahmad. One thing we can do with this information is tailor the hints to the most common mistakes.

For example, given <html><body><CatPhotoApp>Hello World</CatPhotoApp></body></html> we could say

The type of tags should be h1. You should replace <CatPhotoApp> with <h1> and </CatPhotoApp> with </h1>

also, if they've not modified the code at all, it could say something like

You need to modify the code. To get started, click on the line <h1>Hello World</h1> above and start typing.

Also, playing with it now, I noticed that the editor doesn't automatically get focused when the learn clicks "Start Coding". Was that intentional? It seems like it would help if a user could immediately start typing and see things change.

moT01 · 2024-03-08T16:25:45Z

The code below contains an HTML `h1` element. The element has an opening tag, `<h1>`,
a closing tag, `</h1>`, and the text that the element will display goes in between the tags.
You can see the element's text, `Hello World`, displayed in the browser preview.

Change the text of the `h1` element below from `Hello World` to `CatPhotoApp` and watch
the browser preview update to display the new text.

When you are done, check your code to see if it's correct.

Supravisor · 2024-03-09T00:55:54Z

What's the difference between the two?

<html><body><h1>Hello World</h1></body></html> 57672
<html><body><h1>Hello World</h1></body></html> 479

Mention that code goes between the angular brackets.
[✓]<body><CatPhotoApp>Hello World</CatPhotoApp></body> 4829
[✓]<body><CatPhotoApp>Hello World</h1></body> 3114
[✓]<body><CatPhotoApp>Hello World<CatPhotoApp></body> 825
[✓]<body><h1>Hello World</CatPhotoApp></body> 823
I like the idea of tests failing, as it encourages the learner to develop trouble shooting skills, perseverance, and patience.
A short video or animation guiding the learner through the step
https://supravisor.github.io/TestPod/
There are 2218 misspellings of CatPhotoApp, mostly due to spaces, so not sure how effective a copy button feature is.
<html><body><h1>Cat Photo App</h1></body></html> 1829
<html><body><h1>CatPhotoAppp</h1></body></html> 389
Also, it will teach campers to type exactly as the instructions state. As @ojeytonwilliams suggested, tailoring the hints to each variation.

ahmaxed · 2024-03-10T16:39:33Z

Great feedback there is some more context.

What's the difference between the two?
<html><body><h1>Hello World</h1></body></html> 57672 <html><body><h1>Hello World</h1></body></html> 479

There is a spacing difference. Refer to the link in the description for spacing and indentation.

There are 2218 misspellings of CatPhotoApp, mostly due to spaces, so not sure how effective a copy button feature is.

If we allow users to copy the text, it would remove the variations.

ahmaxed · 2024-03-14T08:31:38Z

I want to alter the initial text as little as possible so we could associate the changes in text to changes in user behaviour easier.

How about only changing this:

Find the h1 element and change its text to:

CatPhotoApp

to this:

Change the text of the `h1` element below from `Hello World` to `CatPhotoApp` and watch
the change in the preview.

When you are done, press the "check your code button" to see if it's correct.

moT01 · 2024-03-14T14:01:10Z

I would be fine with that @ahmaxed 👍 So the full instructions would look like this:

HTML elements have opening tags like <h1> and closing tags like </h1>.

The text for an element goes between its opening and closing tags.

Change the text of the `h1` element below from `Hello World` to `CatPhotoApp` and watch
the change in the preview.

When you are done, press the "check your code button" to see if it's correct.

Here's a suggestion with some minor adjustments that I like a little better:

HTML elements have opening tags like <h1> and closing tags like </h1>. The text an element will display goes between its opening and closing tags.

Change the text of the `h1` element below from `Hello World` to `CatPhotoApp` and watch
the change in the browser preview.

When you are done, press the "check your code button" to see if it's correct.

^-combined first two paragraphs into one
-changed "The text for an element" to "The text an element will display"
-changed "preview" to "browser preview"

I'm just guessing, but I think that a lot of the issues might have to do with information overload. There's instructions, and the preview, and code editors, and nav bars, and more. The user is not familiar with most of it, and the instructions don't really explain any of it. So I think the more clear we can make things for users on the first step, the better. That's why I keep making suggestions that somewhat explain the things and are as explicit as possible - e.g. "the code below", "the browser preview", "the text an element will display", etc.

ahmaxed · 2024-03-14T15:55:29Z

Wonderful, let's go with your last suggestion.

I assume once the new instruction is in, the new failed challenges will look different.
As a result, writing tests for the current variations might not be necessary.

I will double check if there are overlaps. We could write tests for those.

huyenltnguyen · 2024-03-22T15:14:39Z

The PR for the instruction update has been merged. I'm going to remove the help wanted label until we have further action items.

jdwilkin4 · 2024-04-11T03:13:03Z

I haven't check the analytics since the changes were merged in. But looking at the forum it looks like there is still some confusion on how to go about the first step

It looks like campers are either not sure what to do, so they don't write anything. Or they are writing <catPhotoApp> like the results show.

Here are a few postings from the forum within the last week and a half

https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-1/683131
https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-1/684136
https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-1/683382
https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-1/683480
https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-1/684804

This tells me there is still a high volume of guessing going on.

IMO, I think it would be better to start with a blank page instead of giving them the h1 element and asking them to change the text. That might be leading to some of the confusion.

By having them write the h1 element, then they will get to see the result appear on the page instead of just the text changing. So it might be a better learning experience overall.

Something like this might work

HTML elements have an opening and closing tag with content in between.

Here is the basic syntax:

```html
<openingTag>content</closingTag>
```

Notice how the syntax of the closing tag includes a forward slash `/` before the element name. 

The first element you will learn about is the `h1` element. The `h1` element is a heading element and is used for the main heading of a webpage.

```html
<h1>This is a main heading</h1>
```

Create an `h1` element and give it the text `CatPhotoApp`.

When you are done, press the "Check Your Code" button to see if it's correct.

Supravisor · 2024-04-11T23:02:28Z

Mentioned earlier about a visualisation for the required code.

.. animation guiding the learner through the step
https://supravisor.github.io/TestPod/
QUOTE EDITED

Starting with a blank page is also a good idea. However, may lead to lots of syntax errors for beginners to navigate.

One of the things Campers who post on the forum for RWD is that they do not understand the hints or error messages.
Catch-22: you have to understand code syntax to recognise syntax errors displayed in the hint message.

Here is a selection from the last ten days or so:

ahmaxed · 2024-04-15T12:20:27Z

The new changes have been in for a week. I will put together another document for the most common mistakes to see if anything has changes. The analytics does not show a considerable change.

jdwilkin4 · 2024-04-15T12:25:44Z

@Supravisor

Mentioned earlier about a visualisation for the required code.

The visualization looks cool but I haven't seen any animations or links for any of the current steps.
So that might not be an option for the curriculum

a2937 · 2024-04-15T19:15:50Z

I wonder if it's possible to make little info icons that explain some of the hint text in the event it's potentially confusing.

ahmaxed changed the title ~~Most common challenge_failed events for step-1~~ Most common incorrect answers for learn-html-by-building-a-cat-photo-app/step-1 Mar 8, 2024

ahmaxed changed the title ~~Most common incorrect answers for learn-html-by-building-a-cat-photo-app/step-1~~ Most common incorrect answers for step-1 Mar 8, 2024

moT01 added status: discussing Under discussion threads. Closed as stale after 60 days of inactivity. and removed status: waiting triage This issue needs help from moderators and users to reproduce and confirm its validity and fix. labels Mar 8, 2024

Supravisor mentioned this issue Mar 14, 2024

fix(curriculum): update instructions in Cat Photo App step1 #54102

Merged

4 tasks

huyenltnguyen added status: discussing Under discussion threads. Closed as stale after 60 days of inactivity. and removed help wanted Open for all. You do not need permission to work on these. labels Mar 22, 2024

huyenltnguyen mentioned this issue Apr 3, 2024

feat: migrate challenge modals #54179

Merged

4 tasks

jdwilkin4 mentioned this issue Apr 25, 2024

fix(curriculum): inconsistencies for code examples in cat photo app #54526

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Most common incorrect answers for step-1 #54024

Most common incorrect answers for step-1 #54024

ahmaxed commented Mar 8, 2024 •

edited

Tasks

ojeytonwilliams commented Mar 8, 2024

moT01 commented Mar 8, 2024 •

edited

Supravisor commented Mar 9, 2024 •

edited

ahmaxed commented Mar 10, 2024

ahmaxed commented Mar 14, 2024

moT01 commented Mar 14, 2024

ahmaxed commented Mar 14, 2024

huyenltnguyen commented Mar 22, 2024

jdwilkin4 commented Apr 11, 2024

Supravisor commented Apr 11, 2024

ahmaxed commented Apr 15, 2024

jdwilkin4 commented Apr 15, 2024 •

edited

a2937 commented Apr 15, 2024

Most common incorrect answers for step-1 #54024

Most common incorrect answers for step-1 #54024

Comments

ahmaxed commented Mar 8, 2024 • edited

Describe the Issue

Considerations:

Goals:

Suggestions

Affected Page

Tasks

ojeytonwilliams commented Mar 8, 2024

moT01 commented Mar 8, 2024 • edited

Supravisor commented Mar 9, 2024 • edited

ahmaxed commented Mar 10, 2024

ahmaxed commented Mar 14, 2024

moT01 commented Mar 14, 2024

ahmaxed commented Mar 14, 2024

huyenltnguyen commented Mar 22, 2024

jdwilkin4 commented Apr 11, 2024

Supravisor commented Apr 11, 2024

ahmaxed commented Apr 15, 2024

jdwilkin4 commented Apr 15, 2024 • edited

a2937 commented Apr 15, 2024

ahmaxed commented Mar 8, 2024 •

edited

moT01 commented Mar 8, 2024 •

edited

Supravisor commented Mar 9, 2024 •

edited

jdwilkin4 commented Apr 15, 2024 •

edited