ChickTech High School Kickoff 2017/Tasks

From mediawiki.org
Jump to navigation Jump to search

Document your work on tasks using the template provided below:

Write a user script to count the number of words in an article and display the number at the top of the page[edit]

Wikipedia HTML article with word count added to it using Javascript.
  • To my Wikipedia Javascript common page, I added the following lines, which displays the word count in an article.
1 var a = $("#bodyContent").text();
2 var wCount = a.split(" ").length;
3 var $wordOutput = $("<p>Word Count: " + wCount + "</p>").css("font-size", "large");
4 $( "#bodyContent" ).prepend($wordOutput);

Write a user script to count the number of paragraphs in an article and display the number at the top of the page[edit]

Picture of article with edited Javascript user file, which adds the number of paragraphs in an artlcle to the respective article's title page.
  • To my Wikipedia Javascript common page, I added the following line, which displays the number of paragraphs in an article with the title.
1 $("#firstHeading").append(" " + $("p").length);

Write a user script to change the font color to red and the font face to bold[edit]

The font color is changed to red and the font face to bold.
  • Changed font color of body content to red
  • Changed font face of body content to bold
1 .mw-body-content {
2 	color:red !important;
3 }
4 .mw-body-content {
5 	font-weight:bold !important;
6 }

Write a user script to count the number of images in an article and display that number at the top of the page[edit]

this is the coffee page
  • First, I found the tags of the images and put them into the variable "numImages"
  • Then, I added numImages to the Header
1 var numImages = $("img").length;
2 var header = $("h1").text();
3 $("h1").text(header + " (" + numImages + " images)");

Write a user script to replace all images in an article with an image of your choice[edit]

All of the images are changed to an image of a cat.
  • Changed all article images to display an image of a cat
1 var cat = "https://www.petmd.com/sites/default/files/sleepy-cat-125522297.jpg";
2 $("img").attr("srcset", cat);

Write a user script to calculate the estimated reading time of an article[edit]

the average reading time for a basketball article
  • First, I collected all of the words in the article and stored them in the variable "numWords"
  • then, I divided the number of words by 200 (the average wpm) to get the amount of minutes it would take to read the article
1 var numWords = $("#mw-content-text > div").text().split(" ").length;
2 var headerWords = $("h1").text().split(" ").length;
3 var totalWords = numWords + headerWords;
4 var timeInMinutes = totalWords / 200;
5 var header = $("h1").text();
6 $("h1").text(header + " (it will take you " + timeInMinutes + " mins to read this article)");

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[edit]

The script creates the magnifying glass buttons in the upper right.
  • This script adds 3 buttons on the right of the article title:
    1. Zoom in by one pixel
    2. Zoom out by one pixel
    3. Toggle between the original font size and the custom font size, modified with the zoom in and out buttons
  • The button images come from Google's Material Design Icons.
 1 // toggled by toggle button. also determines which toggle button image to use
 2 var useCustom = false;
 3 
 4 // toggleImgs[0] to switch to custom, toggleImgs[1] to revert to default
 5 var toggleImgs = [
 6 	'//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_search_black_24px.svg',
 7 	'//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_youtube_searched_for_black_24px.svg'
 8 ];
 9 var zoomInImg = '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_zoom_in_black_24px.svg';
10 var zoomOutImg = '//storage.googleapis.com/material-icons/external-assets/v4/icons/svg/ic_zoom_out_black_24px.svg';
11 
12 // create DOM elements
13 $('#firstHeading').append('<div id="zoomButtons">\
14 <img src="' + zoomInImg + '" alt="zoom in" onclick="zoom(1)">\
15 <img src="' + zoomOutImg + '" alt="zoom out" onclick="zoom(-1)">\
16 <img id="toggleButton" src="' + toggleImgs[+ useCustom] +
17 '" alt="toggle zoom" onclick="toggle()">&nbsp</div>');
18 $('#zoomButtons').css({'float': 'right'});
19 
20 // find DOM elements used later
21 var $bodyContent = $('.mw-body-content');
22 var $toggleButton = $('#toggleButton');
23 
24 // sizes[0] is default, sizes[1] is custom
25 var sizes = [parseFloat($('.mw-body-content').css('font-size'))];
26 // default custom zoom of 2
27 sizes[1] = sizes[0] + 2;
28 
29 // the + converts bool to 0 or 1 to use as array index
30 function updateSize() {
31 	$bodyContent.css({'font-size':(sizes[+ useCustom] + 'pt')});
32 }
33 function toggle() {
34 	useCustom = !useCustom;
35 	$toggleButton.attr('src',toggleImgs[+ useCustom]);
36 	updateSize();
37 }
38 function zoom(dif) {
39 	sizes[1] += dif;
40 	if (useCustom) {
41 		updateSize();
42 	} else {
43 		toggle();
44 	}
45 }