13
$\begingroup$

I've been teaching Java and C# for years and I'll be picking up a web development (HTML, CSS, JS) course in the fall semester because our department is down a faculty member and won't be filling the position.

I can run unit tests on Java and C# to make sure the code students are submitting is correct without an issue, but I don't know how to efficiently assess websites. My school uses Cengage for curriculum delivery and their MindTap product does assessments, but I don't want to rely on that for the primary driver in class for a number of reasons.

How can I efficiently and effectively assess student work other than reading through all their code and observing every web page? There has to be some tool out there that I can work with to do an initial sweep for me... right?

Improve this question
$\endgroup$
5
  • $\begingroup$ Say something about scale. How many students? How many projects? Team based projects or no? $\endgroup$
    – Buffy
    May 30, 2019 at 19:07
  • $\begingroup$ Not a whole lot, 60 students max. Although I'm inclined to teach writing code through project-based curriculum, the specific amount will be based on what options I have available to me. I feel the same way about team-based projects as well, I'd like to include a lot of them, but they can be very messy to assess if the right structure isn't available on my end. $\endgroup$
    – mpcsf
    May 30, 2019 at 19:14
  • $\begingroup$ selenium is a tool for testing web-site functionality en.wikipedia.org/wiki/Selenium_(software) $\endgroup$
    – ctrl-alt-delor
    May 31, 2019 at 8:13
  • $\begingroup$ I am using Code.org and I want to assess their projects differently and outside that platform too. I didn't know about the Linters to check the codes. However, I don't understand how to use it. I am reading the documentation in Github about it and my question is; Can I install on my computer the HtmlInt and having run on a text file that a student creates and I will be able to see the results like that? How do you use it? Thank you so much in advance and thank you for the different resources you mentioned. I am checking them all by now. $\endgroup$
    – Beatrice Mendez Kennedy
    Oct 8, 2019 at 0:54
  • 2
    $\begingroup$ I can run unit tests on Java and C# to make sure the code students are submitting is correct without an issue I can write code that does what it's supposed to, passes every test, and will still be flagged as a massive issue in any reasonable code review (if you want an example, remove all newlines and tabs from your code and rename your variables to randomized 15 letter strings). Am I to infer from this that your lessons do not include readability of code? Because if readability was a lesson focus, quite obviously you should try to (and be able to) read your students' code as well. $\endgroup$
    – Flater
    Oct 30, 2019 at 10:31

5 Answers 5

Reset to default
9
$\begingroup$

Much less detail than the excellent post by Buffy, but directly to the question. Replace unit tests with validations and linters.

Have the students create all content in distinct files: HTML, CSS, and JS. Any styles or JavaScript in the .html file is invalid for the project(s). There are many validators and linters for all three, as well as for any other "code" you choose to use/allow, such as PHP, Ruby, etc.

Since a unit test only gives go/no-go results, a validator is at least as effective. A visual check of the resulting page/site shouldn't take but a few moments as well. If it validates and looks correct, it must be "right."

If you also wish to instill, or enforce, coding standards, comments, indentation, etc., a linter may help.

Running a series of validators and linters, checking the operations of the page/site, and visually scanning the code should take much less time than grading a paper-based exam, so you are still time ahead. If the students are provided access to similar tools, if not the exact ones, or exact settings you use, they can develop the habit of applying the "test" to their own code as part of their development work-flow.

As an extra note, if you need to compare versions/iterations of their code, you can use a system such as git, which need not be based on GitHub, or even use remote repos at all. Each student can be required to create a GPG key for their project work, and sign their commits. With that system, you can use the built-in diff function to see the changes and be certain who committed what.

Improve this answer
$\endgroup$
6
  • $\begingroup$ Thanks for the feedback, it was exactly what I'm looking for. Do you have a recommendation for a linter? As an aside, I currently use GitHub Classroom for all of my programming courses and utilize diff frequently. $\endgroup$
    – mpcsf
    May 30, 2019 at 23:28
  • $\begingroup$ Since I never got the automated linter habit, I have no recommendations. A good place to start looking might be on GitHub. As an alternative, you could consider asking a new question about how to evaluate/look for in a linter for classroom/grading use. Do mind the idea that shopping list questions aren't received well on most SE sites. There is, however, a sister site Software Recommendations that handles them, within limits. $\endgroup$
    – Gypsy Spellweaver
    May 31, 2019 at 2:20
  • $\begingroup$ I'm won't say you must unit test but I'd hate anyone to get the impression that validators and linters give you the same thing unit testing does. A unit test gives you an automated test that proves your code performs as you expected. It documents the abstraction you need. It makes promises about what it will do that using code can depend on. You can't buy that off the shelf. You have to write it yourself. Yes you can inspect what the page looks like but thats manual testing. There are many JavaScript unit testing tools. $\endgroup$
    – candied_orange
    Jun 1, 2019 at 14:43
  • $\begingroup$ @candied_orange You cannot "unit test" HTML, it's not executable code. If it renders as intended on the web page, it's "correct". Validating the DOM in the HTML is the only way to "automate" the testing of the HTML markup. $\endgroup$
    – Gypsy Spellweaver
    Jun 1, 2019 at 18:04
  • $\begingroup$ @GypsySpellweaver you're forgetting the JS that the op mentioned. $\endgroup$
    – candied_orange
    Jun 1, 2019 at 19:27
8
$\begingroup$

For me, 60 is a very large class. Let me focus on a course design, extrapolated from other areas, in my case, the compiler course. The intent here is to make assessment feasible, rather than to say how to do it explicitly.

I would have two projects for the course. The first is individual and lasts two weeks. It would be to extend a framework that I provide and when completed would contain in the simplest way, the elements required for the larger project. It would count for a small portion of grading. But, I'd have to actually grade it. To make this feasible, I'd have them high light all changes from my base code.

The second project is done in teams. I'd choose the teams so that the total number is reasonable. Maybe five people per team, giving you about a dozen projects being done at once. I would also specify this project and possibly supply some base code giving a framework. Each team works separately on the project in parallel. It isn't a division of a larger project, but a "competition" of teams working on the same thing. With everyone working on the same project structure, I only have one thing to think about when grading.

I'd give them clear instructions about now NOT to manage their projects. No "dividing up the work" for example. Everyone is responsible for every part. I would try to convince them that dividing the work is actually more work for everyone since they need to integrate at some point. For beginners this is almost always a bad thing to do.

I would teach them how to run an agile team using something like XP. Iterations can be weekly or every other week. In particular, no one is permitted to commit code that only they worked on, avoiding the "prima donna" problem. I've had the teams name themselves, or I've named them, to build esprit d'corps: Fire, Ice, Wind, ....

I would also want to look at their code, but I now have a more reasonable work load. I would, again, have them highlight any changes they make from previous versions and include all past work (along with my comments) whenever they turn in the next iteration. It is now easy for me to see their progress. Each team turns in a folder each iteration.

I would (probably) require public demos of the projects at the end of the course, with each team having a few minutes to show their results. I normally require that everyone participate in the demo, but with five members per team it might be impossible.

I would use peer assessment within each team to get an idea about how people behave when not under my view. Peer assessment is always positive. "What is the main contribution of each team member? What is your own chief contribution?". Actually I usually, for a team of five, would have everyone give positive assessments of each of the top three contributors. If no one labels "jimmy" as a top contributor, I learn something. If everyone mentions "jimmy" I learn something else. But a positive assessment is more likely to be accurate and avoids the problem of people not wanting to say negative things about their friends.

Everyone gets the same grade on the big project unless there are serious reasons to do otherwise.

I have sometimes created (randomly) a "leader" of each team. The leader is not a manager, but is simply my main contact with each team so that I can get and give feedback when necessary. Try to do interventions early, if needed.

I usually use an asynchronous communication mechanism (a mailing list) so that anyone can ask a question at any time. I encourage others to answer questions as well as ask them, so I don't need to answer every question.

The goal is to reduce the load to a manageable level and still give individual feedback periodically. I haven't tried to automate grading in any way, but just made the scope of my problem more feasible.

Most of the course grade would be on the second project not the final exam (if any).

I could either use face time for lectures, or I could flip the classroom, letting the teams work together in lab and providing "content" through videos or readings done after hours. With a flipped design, I get to monitor each team in real time.

Improve this answer
$\endgroup$
1
  • $\begingroup$ Thank you for taking the time to go over an approach to tackle my problem. I'll definitely take it into consideration when approaching the class. However, I'm looking for tools or techniques for grading automation. I would really like to be able to learn from approaches that other instructors use to make a first pass at assessment of HTML, CSS, and JavaScript code for Web Development projects. $\endgroup$
    – mpcsf
    May 30, 2019 at 23:18
1
$\begingroup$

Assessing web dev courses at scale can be tricky because you have to consider the following:

  • ensure that the resulting web app looks as expected
  • all functionalities should work as expected with the correct logic
  • the code quality to make everything work should meet the industry standard

With 60 students (or any number over 20 really), this can get really tricky.

My recommendation would be to find tools that help you do the following:

  • Asses the looks: You should be able to preview the submission without downloading and running anything locally (CodeSandbox)
  • Correct logic: Either run E2E tests and/or unit tests (Puppeteer, Jest)
  • Code quality: linters (ESLint)

I would also recommend giving a try to AutoGradr that does all of the above in a single tool and is built specifically for educators such as yourself. (Disclaimer: I'm the author of this free tool)

Improve this answer
$\endgroup$
1
  • $\begingroup$ I'm trying AutoGradr right now. Currently waiting for the HTML/CSS stack to be unlocked, but it looks good so far $\endgroup$
    – mpcsf
    Jun 4, 2019 at 15:25
0
$\begingroup$

Another thought that comes to mind is that you can, to some extent, automate checking of web pages with selenium. It would be a very large lift and your students would be forced to follow certain conventions in building their web pages but that may be an approach which could automate part of the work for you.

Just to insure I'm being clear, I'd envision you writing a set of tests which could automatically be run against the student web pages to check for the presence or absence of certain elements.

Improve this answer
$\endgroup$
0
$\begingroup$

I think Buffy's answer is an excellent philosophy of how to solve this, but I would add a specific thing to it: dependency breaks.

Back when I was learning Compiler Construction, we were supposed to develop a Pascal compiler in several steps, each building on the next bit. If you couldn't solve part A, you couldn't even begin to work on part B. Or of your implementation of B was poor, you'd be hobbled in part C too. That's sliding towards "either you do this class excellently or you fail miserably". Not great for students.

So to avoid that, use dependency breaks. The first project should give you a setup for the next project, and that one for the last project. But after the first project has been handed in, graded, and feedback given, there's also a code skeleton available from which to start working on the second project, if you're not so happy with your first project.

Having explicit dependency breaks also makes it easier to reshuffle teams in between projects, in case students drop out of the class or members of a team have a falling out.

In summary: dependency breaks make the class more robust.

Improve this answer
$\endgroup$
1
  • $\begingroup$ Not to mention the tremendous benefits to students who did the assignment, but now get to see a bug-free version with better coding style, or to the students who almost got there, and now get to understand what they missed while they were working on the lab itself. $\endgroup$
    – Ben I. ♦
    Dec 26, 2019 at 19:20

Not the answer you're looking for? Browse other questions tagged or ask your own question.