Google Code-in/Workshop Materials

Workshops organized around Wikimedia and Google Code-in:

Logistics
Date(s): December 9-10th, 2017

Venue: August Home Inc, San Francisco, CA

Event URL: https://www.mediawiki.org/wiki/ChickTech_High_School_Kickoff_2017

Audience
High school students of the ChickTech organization

Learning objectives
Help high school students accomplish a mix of coding and non-coding Google Code-in tasks, and get excited about contributing to Wikimedia and open source.

Workshop design
Coding tasks were around writing users scripts and non-coding ones around editing Wikipedia articles. Students of these workshops had beginner level skills in programming; as these topics required minimum pre-requisites and expert knowledge to get started, they were included in the workshop curriculum.
 * Day 1
 * Icebreaker introductions: “What is your favorite spirit animal?” to set a safe space for participants
 * Workshop sessions:
 * 1: Introduction to Wikimedia, Open Source and Google Code-in
 * 2: Web development basics: introduction to DOM, HTML, CSS, JQuery, understanding how to use developer tools in Chrome, inspecting elements, etc.
 * 3: Completing a Google Code-in task around editing Wikipedia article
 * Day 2
 * Workshop sessions:
 * 1: Getting started with IRC
 * 2: Completing user scripts related tasks in Google Code-in

Pre-planning

 * Shared pre-requisites with students that included: creating an account on Wikipedia, registering on the Google Code-in contest and completing the parental consent form before coming to the workshop.
 * Created tasks on Phabricator and importing them on Google Code-in site with help from Wikimedia program administrators.
 * Recruited volunteers to help with the workshop through the Wikimedia-SF mailing list and ChickTech organization.

Accomplishments
Students completed user scripts (ChickTech High School Kickoff 2017/Tasks) and edited Wikipedia articles on their favorite topics (task url).

Materials
If you have organized a workshop around Google Code-in and would like to document it, post a message on the talk page and let us know!
 * Introduction to Wikimedia, Open Source and Google Code-in (slides)
 * Google Code-in non-coding task (one) around editing Wikipedia articles and coding tasks (ten) around writing user scripts created:
 * Write a user script to add a zoom toggle button on an article page that allows you to increase/decrease the font size of the text on an article
 * Pick an article about your favorite topic on English Wikipedia and make small edits to it
 * Write a user script to make sentences in an article shorter by limiting them to contain not more than 20 words
 * Write a user script to pick a random image from a category in Wikimedia Commons and choose it to replace all images in an article
 * Write a user script to show a chain-link icon next to each section heading, which on clicking copies the page URL with that section anchor to your clipboard
 * Write a user script to replace all images in an article with an image of your choice
 * Write a user script to calculate the estimated reading time of an article
 * Write a user script to count the number of images used in an article and display the number on top of the page
 * Write a user script to count the number of paragraphs in an article and display the number at the top of the page
 * Write a user script to count the number of words in an article and display the number at the top of the page
 * Custom style sheet to change change font color to red and font face to bold