OpenLLM-France/wikimedia huggingface dataset:
# JavaScript/Pagination

This lesson teaches how to implement pagination in JavaScript. This method supports multiple pagination containers on one page. If it is too difficult to understand, try JavaScript/Pagination (simple) with one pagination container first.
The script works by finding all pagination tabs and containers on the page. Then, click events are added to the tab bars that correspond with the pagination containers in the order they are on the page.
When a tab is selected, the tab is highlighted as bold, and the page inside the pagination container it corresponds to is displayed through the display:block inline CSS property, while the other pages are hidden through display:none.
Since the code automatically detects all pagination tabs and containers, new ones can be added without changing the script.

## Pagination tabs

These can be located anywhere on the page. Their order is automatically detected by the script.
* Page 1
* Page 2
* Page 3
* Page 4
* Page 5
* Page 1
* Page 2
* Page 3
* Page 4
* Page 5
# JavaScript/Resources
## Wikimedia lessons

* Introduction
** Not Java
** First Program
** Placing the Code
* Basic JavaScript
** Lexical Structure
** Variables and Types
** Operators
** Arrays
** Dates
** Numbers (see also Numbers 2 @Wikia)
** Strings
* Test Basic JavaScript
* Intermediate JavaScript
** Control Structures
** Functions and Objects
** JavaScript Objects
** Event Handling
** Regular Expressions
* Advanced JavaScript
** Object Oriented Programming
** Constructors and Prototypes
** Access Control
** Inheritance
** Anonymous Functions
** Optimization
** Bookmarklets
** Debugging
** DHTML
** Runtime Document Manipulation
** Introduction to the Document Object Model (DOM)
** Finding Elements
** Adding Elements
** Changing Elements
** Changing Element Styles
** Removing Elements
** Working with the Mouse
** Working With Files
** XMLHttpRequest
** Handling HTML
** Handling JSON
** Handling XML
** JScript in Microsoft
** Best Practices
** History of JavaScript
* Into the Web design courses:
** Web Design/An Introduction to Programming with JavaScript
** Web Design/Getting to know JavaScript events
** Web Design/Getting to know the Document Object Model with JavaScript
** Web Design/JavaScript Challenges
* Authoring Webpages
* Web Development
* CodeCook JavaScript

## Resources

* Debugging Challenges

#### Open-Source

* MW:Project:Scripts

#### Online tutors

* stackoverflow.com
* www.webdeveloper.com/

#### Online learning sites

* LearnStreet - Free online JavaScript tutorials & practice exercises
* w3schools
* codecademy
* KhanAcademy
* Mozilla Developer Network

#### Online content instructor

* http://www.youtube.com/user/thenewboston
* http://www.youtube.com/user/GoogleDevelopers
* http://www.youtube.com/user/webtunings
* http://www.youtube.com/user
* https://www.youtube.com/user/dsree91
...please add

#### Online Code Environment

* writecodeonline.com - javascript
* Generate Object Oriented Classes in Javascript with JavaScriptClassCreator. The JS classes are generated in UML style. GitHub documentation of classes can be generated. The tool is written in Javascript itsself and uses the localstorage of the browser to store alteration of the Javascript classes. Tool is OpenSource software on GitHub https://www.github.io/niebert/JavascriptClassCreator and is intended to support learners in object oriented programming with Javascript.
# JavaScript/Stroop effect

A stroop effect can be generated in JavaScript by appending random words with random colors, which are picked from an array. The length of the array is detected automatically. Some colors have to be omitted due to poor readability.
Before each word is inserted, the color and the word is compared to prevent the addition of the word with the same color. In case of a match, the word and color are shuffled again.
The function that generates the effect lets the user specify how many words should be added, and a button can regenerate the words.
Since it is not possible to generate a stroop effect on the client side without JavaScript, a message in the stroop container instructs the user to activate JavaScript. If necessary, a stroop effect can initially be generated on the server side using similar code as below.

## Dark background

To make the words appear readable on dark backgrounds, alternative colors with a higher contrast need to be picked.
# JavaScript/Test Basic JavaScript
## Part One

* Time required = 5 mins
* Importance: Equivalent to the importance of learning how to type. Low
* Requirements: take the test after learning basic JavaScript. The test requires the use of the alert object. If you are still learning how to put JavaScript in a context for its use, then also study Debug or an equivalent lesson for the quick use of JavaScript through alerts from the JavaScript console. Additionally, you can simply just write the snippets in the questions between <script></script> tags in a standard HTML file. When the HTML is opened, in the browser, the alert will run as the window loads.

## Part Two
### Contributions

Part Two is optional. If you would like to test the JavaScript you're learning, and frame an opinion on some of the requirements (and differences) then complete the following.
Time: open-book, no time limit. Title: title your effort. Importance: equivalent to the initial learning curve required to write any wiki. Low
Definition: In this tutorial the student is required to create another five minute test using the basics of JavaScript and Wiki writing. Follow the instructions to create another five minute test:
* Activity: Copy the block (below this line) from the wiki plain text found in the edit box of this page in EDIT.
* 1. Put a question here?
* How do you declare a variable?
* Note 1: //show script like this
* x = 5
* let x = 5
* variable x = 5
* var x = 5
* Repeat the question from this text three or four times with new questions.
* Complete Below

### Start here

Please sign with four tildes After you questions are created separate with four ----

#### Student Results

* Select edit this page and create your test between Student Results and Answers here:
put test here

### Answers

* ↑ (In)correct: add an explanation here
* ↑ (In)correct: add an explanation here
* ↑ (In)correct: add an explanation here
* ↑ (In)correct: add an explanation here
# JavaScript/Pagination (simple)

There are a variety of ways to implement pagination on a website. This is a generic example with the goal of being easy to understand. For a more sophisticated lesson, see JavaScript/Pagination.
The JavaScript code works by counting the pages inside a container element and showing the selected page while hiding the others. It is scaleable, meaning new pages can be added without needing to change the script.
All pages are shown by default so users without JavaScript can still read the content. When the script is initiated, the first page is selected.

## Pages

* Page 1
* Page 2
* Page 3
* Page 4
* Page 5
# JavaScript/Timer

These JavaScript functions format a given number of seconds as an hour-minute-second or minute-second time or only show hours when one hour is exceeded. The names of the functions are HMStimer and MStimer and mediaTimer respectively. The name of the third refers to the common use of this timer layout in multimedia player software.
Each of these functions is bundled with a separate function (_core suffix) to be able to handle negative and invalid inputs. Should a negative number be entered, the time is returned with a prepended dash, and if no valid number is entered, "– –:– –:– –" is returned. The thin spaces between the dashes are necessary to match the width of the digits.
The timer functions can be seen in action by running the media timer script on a web page with a video or an audio element.
# JavaScript/Minification

Minification is the process in which a source code is reduced in length without affecting functionality. This means removing whitespaces and new lines outside of strings and discarding all comments. Some minifiers also shorten variable names.
Minification is employed by some sites like YouTube and Twitter which use large (megabyte-sized) JavaScript files, to speed up loading. For smaller sites, it might not be necessary if end-to-end compression is activated, meaning the server compresses data using a format such as gzip before sending it to the visitor's browser, reducing the size more than minification would, and the visitor's browser decompresses it, meaning the process is transparent to the user. Lack of minification also reduces the complexity of maintenance.
Since minified code is difficult to read, it is not intended to be directly worked on. The reverse process, prettification, adds back new lines and indentations. However, it can not restore names of variables and functions if they were shortened during the minification.
As an experiment, the small one-click saver script has been run through three online services for code minification. Additionally, two backticks ("`") separated by two new lines have been appended to the input script to see if they are converted to a single-line string with backslash-N's ("\n\n"). Here is a comparison of the results.

## Minify-JS.com

Minify-JS does both convert new lines into backslash-N's and convert "true" statements into "!0" to save two bytes each. Function and variable names are also converted to single-character names.

## TopTal

The minification tool by TopTal delivers a similar result as above. However, the multi-line string inside the backticks is not converted to a single-line string.

## DuckDuckGo

The search engine has an integrated JavaScript minifier accessible by searching for minify JavaScript. Similar search terms might work as well.
The minifier of DuckDuckGo retains the original function and variable names, does not convert "true" statements into "!0", and does not convert the multi-line string in the backticks to a single-line string. The benefit of retaining the original function and variable names is that this allows for more readable code when prettified, which is the opposite process of minification.
# Instructional design/Strong Learning Design Checklist

In this lesson, you are going to learn how to distinguish between action-oriented and information dump training materials. Ultimately, that will help you to design training materials that are action-oriented so that it benefits the learner. Ready to get started?
* << Introduction | Scenario >>
# Instructional design/Strong Learning Checklist/RevPractice

* The Checklist for Strong Learning Design (SLD)
| Introduction Avoid Boring Training Ask Your Learners To Do Something Motivation for the SLD Checklist Overview of the SLD Checklist Review Your Training Use the Strong Learning Design Checklist The SLD Checklist Structure Action-Oriented Training Information Dump Training Your Turn: Practice Assess Your Skills Final Exam Go Forth! Create Great Training Lesson Review References and Materials | Practice: Your Turn Classify each of the following examples as action-oriented or information dump. Once you've submitted your answers we'll provide you with detailed feedback on the correct answers. 1 You are learning how to play a marching snare drum. In a booklet describing proper stick control, the following is provided: Action-Oriented Information Dump 2 You are excited to be completing a certificate in Environmental Health and Safety in the workplace. When your course materials arrive, you find a spiral bound manual containing 10-year old photocopied materials. Your instructions are to read the materials and complete the multiple choice exam at the end of the booklet. Action-Oriented Information Dump 3 You are an international student located in Asia completing an online master's course in business. The first case study asks you to analyze a bowling alley business that is rapidly losing money, and provide the owner with a revitalization plan. You have never seen a bowling alley and are unable to relate to many of the issues included in the study. Action-Oriented Information Dump 4 You are completing a self-paced photography course, specializing in the culinary industry. Your materials include different types of pictures, such as: Action-Oriented Information Dump 5 You are completing a self-paced training course to prepare for taking the Microsoft Certification Exam. One of your modules says that upon completion of the module you will be able to: Create a word document with multiple heading levels Add a bulleted list to a document Add a table of contents and index to document Action-Oriented Information Dump << Back | Next >> |
# Instructional design/Strong Learning Checklist/RevID

* The Checklist for Strong Learning Design (SLD)
| Introduction Avoid Boring Training Ask Your Learners To Do Something Motivation for the SLD Checklist Overview of the SLD Checklist Review Your Training Use the Strong Learning Design Checklist The SLD Checklist Structure Action-Oriented Training Information Dump Training Your Turn: Practice Assess Your Skills Final Exam Go Forth! Create Great Training Lesson Review References and Materials | Information Dump Training What is Information Dump Training? Training materials that Cathy Moore would label as "sad information dumps" merely provide learners with long descriptions of boring text. Information dump materials DON'T engage learners by asking them to formulate an answer, practice a skill, or think critically about a specific subject. Simply put, information dumps put learners to sleep. Information Dump Examples This section contains some examples of training materials that are information dumps. Objectives The following is an example of learning objectives that represent "information dumps." Note that these objectives DON'T ask the learner to do anything: Materials The following describes training materials that DON'T allow the learner to actually practice what is being learned. These training materials subject the learner to an "information dump": You are learning to use new software such as SPSS statistical software. This software package comes with a printed manual with descriptions of each of the features of the software. Your company asks you to attend a day-long training session that reviews the information in the training manual, but the room only contains a workstation for the instructor. You therefore aren't given an opportunity to actually use the software during the training. Activities The following describes activities in a training session that DON'T provide the learner with a powerful learning experience. The learners are subjected to a day-long "information dump": You are attending a course on fire safety. You listen to the instructor who gives an example of a fire in the kitchen. He says that in order to put out a fire of this kind, use a fire extinguisher and call 911. You listen to a 90-minute lecture on flammable materials, causes of fire, fire prevention, and how to extinguish a fire. The training does not include pictures, video, or demonstration of the use of an actual fire extinguisher. Tone and Esthetics The following describes training materials that do not respect what the learner already knows. This is clearly an "information dump" that DOESN'T motivate the learner: You are the new manager at Star Times, the leading newspaper in your city. When you arrive on the first day of work, you are given several manuals to review. Your leader asks you to read all the manuals because they tell you how to be an effective manager. You start with the first manual and you find that it is 10 years old and it contains pages and pages of outdated management philosophy. << Back | Next >> |
# Instructional design/Strong Learning Checklist/Review

* The Checklist for Strong Learning Design (SLD)
| Introduction Avoid Boring Training Ask Your Learners To Do Something Motivation for the SLD Checklist Overview of the SLD Checklist Review Your Training Use the Strong Learning Design Checklist The SLD Checklist Structure Action-Oriented Training Information Dump Training Your Turn: Practice Assess Your Skills Final Exam Go Forth! Create Great Training Lesson Review References and Materials | Lesson Review In this lesson, you learned how to: identify action-oriented training materials that ask learners to DO something identify information dump training materials that DON'T use the strong learning design checklist to review training materials to determine where improvements can be made pinpoint areas of your training that can be improved to create a more powerful training experience << Back | Next >> |
# Instructional design/Strong Learning Checklist/Introduction

In this lesson, you are going to learn how to distinguish between action-oriented and information dump training materials. Ultimately, that will help you to design training materials that are action-oriented so that it benefits the learner. Ready to get started?
* << Introduction | Scenario >>
# Instructional design/Strong Learning Checklist/RevAO

* The Checklist for Strong Learning Design (SLD)
| Introduction Avoid Boring Training Ask Your Learners To Do Something Motivation for the SLD Checklist Overview of the SLD Checklist Review Your Training Use the Strong Learning Design Checklist The SLD Checklist Structure Action-Oriented Training Information Dump Training Your Turn: Practice Assess Your Skills Final Exam Go Forth! Create Great Training Lesson Review References and Materials | Action-Oriented Training What is Action-Oriented Training? Action-Oriented Training materials ask learners to DO something, or engages them in a way that respects their intellect and challenges their ability to think. In this section of the lesson, we present some examples of action-oriented materials that fit within the 4 categories of training materials assessed in the Checklist for Strong Learning Design. Action-Oriented Examples This section provides some examples of training materials that are action-oriented. Objectives The following objectives for a lesson on how to build a container garden are action oriented. Note that the learner is asked to be able to DO something at the conclusion of the lesson: Materials The following describes training materials that are action-oriented. Note that these materials ask the learner to DO something after viewing them: You are learning to use a new software package. You access the product features page and find short videos that demonstrate the major feature of the software. In addition, you are presented with a scenario that asks you to use several features of the software. You complete an assignment and receive a "badge" for completing the tutorial. Activities The following describes an activity associated with training materials that are action-oriented. Note that the activity provides the learner with a job aid to DO something at the conclusion of the lesson: You have completed a course on Office Ergonomics that outlines the best setting for your office set-up. In the course, you learn how to set-up your work-desk, chair, keyboard, mouse, and monitor. At the end of the course, the final assessment requires you to change the set-up of your personal workstation based on the course content and a job aid. Tone and Esthetics When using illustrations in action-oriented materials, realistic photos are more powerful than cartoon drawings for showing how to DO something. For example, the following illustration is from a lesson on 4-mallet marimba technique: << Back | Next >> |
# Instructional design/Strong Learning Checklist/References

* The Checklist for Strong Learning Design (SLD)
| Introduction Avoid Boring Training Ask Your Learners To Do Something Motivation for the SLD Checklist Overview of the SLD Checklist Review Your Training Use the Strong Learning Design Checklist The SLD Checklist Structure Action-Oriented Training Information Dump Training Your Turn: Practice Assess Your Skills Final Exam Go Forth! Create Great Training Lesson Review References and Materials | References and Materials We hope that you found this lesson useful, and will continue to use the Checklist for Strong Learning Design to evaluate and improve your training materials. Here is a list of materials referenced in this lesson. (Please note: If you wish to return easily to this page, right-click each link, and choose to open the link in either a new tab or new window). Dowload the PDF version of the Checklist for Strong Learning Design. Visit Cathy Moore's Blog for more valuable resources to improve your training. Reference Cathy's Blog and content policies page for information on how her materials may be used. We extend sincere thanks to Cathy Moore for allowing us to use her materials for this lesson! << Back |
# Instructional design/Strong Learning Checklist/Avoid Boring Training Overview
## Overview

The key learning objectives of this lesson are:
* Given a sample of specific component from a set of training materials, you will be able to correctly classify that component as either “action-oriented” or an “information dump” as defined in Cathy Moore’s “Checklist for Strong Learning Design.”
We have Cathy Moore's explicit permission to use her checklist for developing this lesson.
<< Introduction | Scenario >>
# Instructional design/Strong Learning Checklist/Avoid Boring Training Scenario

You are a new leader in the marketing department and your main responsibility is to increase the sales of credit cards. In order to do that the first step you take is to become familiar with the most important credit cards that your bank sells. There are a few online courses that the bank offers and you decide to start by reviewing the course for the poorest-selling credit card. The course talks about the interest rate, the color of the card, some of the benefits of the card, for example purchase protection etc. At the end of the course, you come away with a lot of data about the card like product specifications, but you don’t get any answers on how to sell the card.

## Quiz

What is this type of learning? Select the best response.
* << Introduction | Overview >>
# Law of sines/Elementary-geometric/Exercise

Prove by elementary geometric considerations the Sine theorem, i.e. the statement that in a triangle the equalities
    ${\frac {\sin \alpha }{a}}={\frac {\sin \beta }{b}}={\frac {\sin \gamma }{c}}\,$
hold, where $a,b,c$ are the side lengths of the edges and $\alpha ,\beta ,\gamma$ are respectively the opposite angles.