Suggestion to improve viability of challenges for more types of learners

Contributors
1

I was discussing a challenge with some others on GH (https://github.com/freeCodeCamp/freeCodeCamp/issues/16692) when I came up this idea, and it was suggested that I share it here.

If you’re feeling overwhelmed by working on FCC right now, you may want to skip this for now. :wink: I get too ambitious sometimes. Please don’t be frustrated with me! :hide: I hope this idea helps.

Idea

I’d help do this if I could actually wrap my head around the programming necessary, plus Git/GH still confuses me…

I’m a fan of playing with values, so I tend to play sometimes, and my son (9 yo) thinks it was pretty funny when we played with margins and padding together. :wink: Doing it can help me understand. In fact, to get over confusion in a challenge, I sometimes play with values. It can be pretty amusing/fascinating!

As an educator, I recognize that different people learn differently so, while I really dislike Code School (for example), other people think it’s great. Anything that can increase the viability of FCC should at least be considered for inclusion - if not for the upcoming version, then for future versions - don’t you think?

So I got this bigger idea that is potentially going to take way more effort (and, thus, make you devs groan, unless you can get existing code from other sites) depending on which options you choose (if at all), because it’d be useful in many challenges/areas/sections (not sure which level would work best for FCC’s methodology) and, thus, require a unique addition to multiple pages. I’m not sure how much of these additions could be standardized to reduce programming, but I’ll bet the devs who are good at JS will know.

I understand that people can observe changes via manipulating values but that assumes that they know which values to change, are the type of person who will do that (some people won’t think of it, others will be afraid to do so because they’re afraid to break it), and so on.

So, the first option would be to add images as a visual aid (yes, reading is visual, but it’s different from seeing something move, and involves a different part of the brain). This would be the easier option, I think.

Now for the more complex option. You could add generator-type examples that allow a person to see how changing a value affects the GUI. Not sure whether you should show the code, but you should allow the relevant value(s) to be manipulated with a slider/field/buttons and show the change. Would this take more effort than generating animated images? I don’t know - I have no idea how to make an animated image.

If I’m not being clear, here’s some info on some sites I’ve found that offer this sort of thing (the Ultimate CSS Generator is possibly the most complete). Most of these offer generators which let you change attributes of various things you can do in CSS, just using sliders, and show you the code used. There are other sites that offer the same for BootStrap, HTML, etc.

*CSS Generator.org has 10 generators:Box Shadow, Text Shadow, Gradient, CSS Cursor, Border, Border Radius, Transform, RGBA & Hex Color, Filter, Multiple Columns

*CSSmatic offers 4 generators: gradient, box-shadow, noise texture and border radius generators using sliders, toggles and color pickers, so you can see both the effect and the corresponding code.

*CSS3 Generator offers 13 different generators: Border Radius, Box Shadow, Text Shadow, RGBA, @font Face, Multiple Columns, Box Resize, Box Sizing, OutlineTransition, Transform, Flexbox, Gradient.

*Enjoy CSS has a few stylers for blank, input, block and button; generators for text, background, shadows, border & radius, transition, transform, with a gallery of buttons, text fields, text effects, shapes, gradient patterns and art; various options exist for each choice.

*CSS Layout Generator is a 100% free tool used for creating HTML/CSS templates. It lets you get up and running with barebones design code ASAP. You can set the doctype, CSS reset, layout width, header and footer sizes, 0-2 sidebars on the left or right, and keep the footer at the bottom of the screen or emulate equal height columns. Click the link and it’ll show you a sample of what you chose, and there is a link to a .zip file with the HTML and (unformatted) CSS files.

*HTML Table Styler - CSS Generator is a selection rich environment for generating code to create a website template with 13 preset styles. It also has a table to div converter (link at bottom). It displays the HTML & CSS, and WYSIWYG display. The table GUI has options:
-Create a table using the div or table tag and define the font, border, background color, cell, padding, width and height (px or %), and border collapse, with or without demo text.
-Style the header’s font size, bold, text color, background color & gradient, divider’s color & size, line color & size, text-align.
-Style the body’s font size, bold, text color, border size & color, h-stripes & v-stripes, size.
-Style the footer’s font size, bold, text color, background color & gradient, line color & size, link colors.

*CSS Code Generators has Gradient, Box Shadow, Text Shadow, Color Picker, Font Styler, Table Styler, Column, Border & Outline, Border Radius, Box Transform, and Background Image with HTML, CSS and WYSIWYG display, with sliders, color pickers, etc.

*The Ultimate CSS Generator has Code Generators for:
-CSS3, HTML5, Microdata, JSON-LD, Meta Tags, Open Graph, Twitter Card, and File Name
-Animation
-Background (BACKGROUND COLOR, BACKGROUND GRADIENT, BACKGROUND IMAGE), Border (BORDER, BORDER IMAGE, BORDER RADIUS, BOX RESIZE, BOX SHADOW, OUTLINE, OVERFLOW (X, Y), VISIBILITY)
-Color (OPACITY)
-Filter (BLUR, BRIGHTNESS, CONTRAST, GRAYSCALE, HUE-ROTATE, INVERT, SATURATE, SEPIA)
-Layout (COLUMNS, DISPLAY)
-List (LIST STYLE)
-Miscellaneous (CURSOR)
-Text (LETTER SPACING, LINE HEIGHT, TAB SIZE, TEXT ALIGN, TEXT DECORATION, TEXT INDENT, TEXT SHADOW, TEXT TRANSFORM, WHITE SPACE, WORD BREAK, WORD SPACING, WORD WRAP)
-Transform (PERSPECTIVE, TRANSFORM)
-Transition
and links to: Rank Gen SEO Analyzer, and Programmer Shirts & Mugs

*W3Schools Web Templates has a selection of CSS Templates.

2

I think there is a lot of potential in this idea, but it is all certainly a future state, long term goal.

I am going to quote the parts I am going to comment on :slight_smile:

I think adding more visual elements is a great idea, I think it is pretty well done in the early lessons in the visuals with the code but it seems to fall off in the more abstract ideas.

I think some of this amount of effort would be in if there are any ‘open sourced’ sites currently doing this, and if so, is there a space to use some of their code base to put something together. It could also be built to link to the other site and the specific example, but personally, I tend to avoid linking to things I can not control. They could potentially update and beak every link, so something FCC controlled would be better, again, in my opinion.

Something that might be really cool in a long, long time from now is putting together a way for the challenges to be dynamic. So the instructions and could change. Maybe not for a core curriculum but for a type of practice space to keep fresh on all of the concepts. This would likely be super complex, but it could help those who need the repetition.

1 Like
3

For this early stuff and interactivity, the Khan academy has it a bit better. You may want to check that out.

1 Like
4

Yeah, that’s true.

Also true. I was more thinking along the lines of open-source rather than linking for the reason you mentioned.

I need repetition :rofl: Could you flesh out what you mean by dynamic other than a practice space (do you mean like CodePen/JS Fiddle/Solo Learn Playground?)?

What exactly do you mean?

5

It’s clearer for the gamey javascript stuff, but take the box model exercise as an example: https://www.khanacademy.org/computing/computer-programming/html-css/css-layout-properties/p/challenge-the-boxer-model

1 Like
6

A few people have thought very hard about what you’re suggesting, it’s a really good avenue of thinking and it’s really important, it’s just difficult to implement well. You’re right to mention CSS generators - I’ve found them ridiculously useful for learning how things work, and then have used them constantly ever since when actually building real things.

Regarding work by others - Khan academy based the way their interface works on work by Bret Victor - this essay is his response to Khan Academy and it frames what you’re talking about: Learnable Programming

A few things that kinda get close:

  • Jupyter notebooks, which allow you to write documentswith interactive code embedded in them (extremely useful for things like scientific computing, learning etc) - http://jupyter.org/
  • First of hopefully a lot of interactive learning resources from Microsoft: Numbers in C# - Introduction to C# interactive tutorial | Microsoft Learn
  • The IDE LightTable tried to use Bret Victor’s ideas - not sure they really succeeded, but they tried to make sure that anything you wrote could immediately be evaluated - http://lighttable.com/ - I know it works well for Clojure developement, but I’m not sure how far they got with other languages, it looked like the project was dead until fairly recently, but it seems to have revived.
  • IDEs/text editors are getting better at absorbing the ideas about interactive/learnable programming - one example is the QuokkaJS, a JavaScript-focussed plugin for VSCode that allows you to see values update inside your code as you write it - https://quokkajs.com/

I’ve got loads of other links from various attempts to build small learning tools, I’ll try to dig them out. That Learnable Programming essay is the main thing though; but you need to bear in mind with suggestions this (from another Bret Victor essay):

Manipulation software generally displays a representation of an object—the model—which the user directly manipulates with pseudo-mechanical affordances. Because manipulation is the domain of industrial design, manipulation software emphasizes industrial design aspects.

Consider a tool for laying out a small newspaper. The user will spend most of her time performing a number of pseudo-physical operations—writing, drawing, cutting, moving, rotating, stretching, cropping, layering—within a virtual space. The primary design challenge, just as with any industrial design, is to provide affordances that make these mechanical operations available, understandable, and comfortable. However, in a physical space, each operation would use a specialized tool. Designing a “mega-tool” that cleanly incorporates all operations (and flattens them into two dimensions, and uses only the gestures “click” and “drag”) is a significant challenge indeed.

Although manipulation is the focus, good manipulation software must provide superb visualization as well. This establishes the feedback loop that is critical for all creative activity—the manipulator must see the effects of her manipulation. Thus, manipulation software design is also a significant graphic design challenge.

For example, the newspaper editor needs to see what a page looks like—close-up, from a distance, and in relation to other pages—and how it would look in a variety of other configurations. She wants to see misspelled words, lines that are poorly justified or hyphenated, and widows and orphans. She wants to see columns that are short or overlong, and how they can be corrected by changing column width or leading. She wants to know what stories and ads are still on the table, their sizes, and how they can be fit in. She wants to know how recently and how often stories about a given topic have run, and how readers have responded. She wants to know past response to a given ad, as a function of the topics or authors of the stories it was coupled with. Finally, the presentation of all this information must not distract the editor from the primary task of manipulating the layout.

Furthermore, the industrial and graphic designs in manipulation software must be in intimate synergy, since it is the graphic design which describes how the object can be manipulated—the mechanical affordances are graphical constructs. Even more graphically challenging is manipulation of abstract objects, such as music or financial data, where the graphical representation must show not only what can be done with it, but what it is in the first place. As opposed to painting software, for instance, where the graphical representation can be the artifact itself. This is not a pipe, but it’s close enough.

Because of these intertwined design challenges, the design of excellent manipulation software is unbelievably difficult, and mustn’t be underestimated. Fortunately, for an enormous class of software, manipulation is not only largely unnecessary, but best avoided.

3 Likes
7

@DanCouper I haven’t finished reading that article, but it is great. I haven’t looked at Khan (my daughter likes it, though), so I can’t tell - is he taking little digs at KA’s stuff, or are they fully in line with what he’s proposed?

One thing I hate about programming is that languages are often written to protect programming jobs. There are websites out there that teach programming logic, but when languages are deliberately obfuscated, it makes it tough to enter the field. There are certainly plenty of people who could make a positive contribution to the programming world if programmers who make languages would stop doing that. Yes, I know, salaries would go down because the pool of available programmers would increase. I take a more global, what’s-better-for-the-future-of-humanity-and-the-planet view on things, instead of pure money matters. But I digress.

I came upon a possible hitch in https://github.com/freeCodeCamp/freeCodeCamp/issues/15941 to the idea of using MORE images. On 10/7/17, @QuincyLarson says: “Very few of the challenges have images, and we’re hoping that even fewer have images in the future. We hope to gradually remove a lot of the images that are currently in the curriculum to make it faster and simpler. For example, we’ve eliminated almost all of the slide challenges.” :frowning: This is counter-intuitive in terms of both best educational practices and what the article talks about. :unamused:

I don’t understand this idea of making it faster and simpler if it sacrifices an improved learning experience that is valuable for a broader range of users.

8

@QuincyLarson responded to my question about images thusly:

Thanks for your feedback. We have a ton of videos and tutorial articles with lots of images that explain concepts as well. For the challenges, we want them to be focused on interactive coding, and following clear instructions.

Images take time to load, take data, and don’t necessarily look good on all devices. One of our goals is to make freeCodeCamp as small as possible so it won’t use up much data, and it can easily be stored and run many different places. Images can sometime add additional vital information, but they are often unnecessary.

I responded, and he added:

Thanks for your feedback. We may consider adding more images in the future.

Our feedback from campers suggests they aren’t necessary in most cases.

I’m not trying to step on anyone’s toes - I just want FCC to be the best it can be! :smile_cat:

I’m writing this here because I didn’t feel it was good to continue to discuss this matter here, effectively usurping an issue thread. :frowning:

{Below: You=FCC, not a specific person}

You know, if your concern is speed (rather than storage space) and appearance, you could offer campers a toggle to turn off images. That way, people who are on a low-speed connection, a small-screen device, etc., could speed things up by disabling images, while those who want them, have a fast connection, etc. can choose to have them on (or off).

As far as feedback, I’m curious. I’m guessing it was informally collected…

  • How many campers gave feedback?

If the sample is small, you won’t get valid info that represents everyone.

  • How was the feedback obtained?

Some methods, such as forums and mailed surveys, are less likely to be responded to. Additionally, some types of surveys are less likely to be completed by certain types of learners, which can be related to sensory preference. If the feedback was obtained incidentally by searching the forum, then it is both limited demographically and by context/scope.

  • What was done to ensure a broad demographic?

A survey without a deliberate demographic spread will not provide meaningful data.

  • What was the demographic?

If it didn’t target the types of learners you want to attract, the data isn’t useful. If you didn’t get enough responses from the relevant demographic group(s), the data isn’t useful.

  • What was the scope of the survey/question?

If it wasn’t scoped to feedback about images, then the feedback was incidental to the actual scope, which implies a small number of replies about images.

  • Was the feedback solicited or offered and, if it was solicited, was the focus actually on the use of appropriate and useful images, or images in general, images in every exercise or only where needed…etc.?

If the feedback was offered, then it was incidental to any efforts by FCC to find out the value of images, and was not focused on the specific needs for feedback that FCC had at the time.

If the feedback was solicited, the focus can bias the results and may even invalidate the feedback. Also, the experience users had at the time, and the types of images and their placement, would also bias the feedback.

  • How many of the campers are confirmed image learners vs text learners, etc?|

Since your platform is entirely visual and kinesthetic, it is important that you hear from visual learners of all stripes. Auditory learners will not find using FCC to be easy, or even not at all possible. Yes, I know there are videos on YouTube, but do exercises link to them? I haven’t seen links to anything thus far. FCC has cut out an entire segment of the population. Yes, I understand that FCC may not have the facilities and people to produce videos for each exercise, and that it takes a long time.

  • How many of the respondents key to text as opposed to other visual cues?

I actually saw a comment on another site by a visual learner who didn’t like FCC because there were no images/videos. One person is only one, but when you consider that a large proportion of users will not provide any feedback, one person is representative. I like FCC because I learn better from text than videos, at least for programming, but I sometimes need images.

  • How many of the images that were in FCC challenges at the time were of high value (e.g. it helped to explain the content in a non-text way, reduced frustration via mood-lifting, etc.)?

Poor placement, poorly designed images, images that are not relevant or useful, etc., all detract from the learning experience, which will result in more negative feedback, meaning it’s invalid feedback.

  • How many of the images followed some or most of the guidelines suggested in Bret Victor’s article?

More is better.

There are other questions I could add, but I must get back to studying. :wink:

Yes, I used to do surveying, in addition to teaching, public speaking, blah blah.

And, yes, maybe FCC just doesn’t want to move in the direction of appealing to all learners at this time, and/or there may be other considerations that prevent it.

Note: These questions are up to be answered by anyone in the know, not just Quincy. :slight_smile:

9

So I wrote a long thing about ways to help with this and then I finally clicked the “Get a hint” button and realized that it was the answer. (really it might be the answer, but I feel pretty confident about it :slight_smile: )

Maybe it is just me, but I never even knew that this was here. That or I did and totally forgot about it.

I think it’s good that the hint in a challenge directs to a hint for that specific challenge.
But could we add another link/button for guides related to that challenge? Maybe call it “Additional reading materials”? (I am not in love with that wording…)

So @ReveurGAM, thoughts?
There are a lot of missing articles for beta, and I think the guide may be a place for an additional explanation and perhaps a visual element? Also there is specifically missing a hint guide for this challenge that we were discussing on this issue.

@QuincyLarson Any thoughts on that direction? It seems that was what the guide was intended for and we were just missing out on knowing about that element of freeCodeCamp.

10

I didn’t even know that the guides existed (I’ve never used the hints) until I saw your message on my forum thread. FCC’s lack of links to relevant topics outside of FCC is a thing I do not like, and I don’t agree with putting an image that is supposed to help with immediate comprehension of something. It’s the educator in me. I don’t like the barebones approach because it only works for some learners. However, this is not my site, so I have to abide by the way things are done, even if I know they are not the best solution.

To clarify, I dislike the lack of external links because one problem with searching is you’re going to hit a lot of bad sites that either give incorrect or out-dated info. It’s hard for a noob to know where to search and which sites to avoid.

The whole point of my report on GitHub was that the challenge wording caused unnecessary confusion. AFACT (As far as I can tell) from Quincy’s responses, we don’t have the same vision about using images. Since this isn’t my site, I must defer to the powers that be.

I think that any site that follows the suggestions in the article Dan linked to will be at a significant advantage in getting marketshare, assuming that they market aggressively, or get lots of members to use the power of word of mouth. WoM is how I found out about FCC…

11

Yes - that’s what the hint button is for.

We don’t want to distract campers from trying to solve the challenge themselves by giving them a bunch of links to read right there on the challenge. Many people would use those links as a way to procrastinate the actual coding part (myself included). But those links go well in the hint section.

There are a lot of new challenges for which we haven’t yet created challenges. We’re in the process of creating stubs for them.

1 Like
12

Yup, totally agree. I think a bunch of links in the challenges would be overwhelming, and fCC does a great job of making the platform not overwhelming. It eases learners through the lessons well. When I started (and now), extra things like lists of links in the challenges would have easily derailed me and halted my progress.

1 Like
13

I think that is a great point towards keeping things simple and non-distracting. I would agree that most of the time that is exactly what people need.

I would add that I never wanted to push the “Get a hint” button. This was because I thought it would work like codeschools hint button and basically give you the answer. If I had known it was a link to additional information I would have utilized that more when I wanted to further my understanding of the concept.

I guess for me it is about potentially increasing the visibility of the guide as a great resource.
And maybe it is just me since I was turned away from pressing the hint button because of my past experience.

1 Like
14

This may be a valid concern for many campers. We would welcome your help updating these guide articles.

Note that even though www.freecodecamp.org is pointing toward the forum, the beta version will be pointing toward the guide.freecodecamp.org versions of these hint guides, so you should update those.

Here’s how you can do this: https://github.com/freeCodeCamp/guides/blob/master/CONTRIBUTING.md

15

By dynamic, do you mean something along the lines of a personalized quiz area? For example, depending on where you are in the curriculum, you will see a quiz consisting of questions related to all of the content you have completed so far. Upon grading the quiz, an algorithm logs which questions you did well on vs. which ones you did not do well on, and then continues to serve up more questions or content related to what you did not do well on to help you practice. This is something you can do with Learning Content Management Systems. It requires a properly tagged question base, so new questions can be served up for practice.

16

Since it is clear that a multi-sensory approach geared towards helping the largest number of learners is not desired, I withdraw my suggestion.

1 Like
17

Are there ann other opportunities?

18

If someone needs a more visual approach I suggest Khan Academy for the basics of JavaScript (after that they also resort to wall of texts)