Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	SAL KA - An API Labs
ID	5414181885788160
Created	5 years ago, 1597690738991
Updated	4 years ago, 1617474925556
Code	<!DOCTYPE html> <!-- Endpoints to add: 1. https://www.khanacademy.org/api/internal/questions?casing=camel&kind=questions&limit=10&page=0&topic=computer-programming&format=pretty - get Computer Programming community questions (change topic for other communites?) Todo: - No longer applicable A. Finish main pages - Done! B. Start lessons - Done! C. Create playground? - Done! D. Create placement test? - Probably won't E. Create character like Hopper to help you through the lessons - Probably won't F. Create on scroll animations - Probably won't G. Get the h5 on the nav to not look blurred - Done! H. Get a color scheme - Done! I. Create logo? - Done! (computer) J. Create save method - Probably won't K. Finish examples - Working L. Create "Next lesson"/"Next example" buttons As you can see, I have a lot of work to do... Captain's log: Stardate 8/4/2020 - Spent about 1.5 hours. Created the navigation bar, homepage content, and the page changing function. Currently at 253 lines (not including empty lines at the end). Stardate 8/5/2020 - Spent about 0.75 hours. Created sticky nav with JS (position : sticky; wasn't working :\), lesson select page, and footer. Also added Bluebird's thumbnail saver. Currently at 359 lines. Stardate 8/6/2020 - Spent about 0.5 hours. Started working on lessons 1-2. Currently at 397 lines. Stardate 8/9/2020 - Spent about 1 hour. Worked on color scheme and lesson select hover effects. Currently at 453 lines. Stardate 8/10/2020 - Spent about 1.25 hours. Wrote the about section and lesson three. Currently at 508 lines. Stardate 8/12/2020 - Spent about 1.75 hours. Started docs and implemented editor (had been working on it on another program on previous days). Currently at 714 lines. Stardate 8/13/2020 - Spent about 1.25 hours. Finished docs. Currently at 797 lines. Stardate 8/14/2020 - Spent about 1.75 hours. Finished the lessons and the beyond page and started the example page. Nearly done with displaying chat example (nearly died from the date mathmatics but the regexp wasn't half bad). Currently at 951 lines. Stardate 8/15/2020 - Spent about 1.5 hours. Finished first and second exmaples and made the time since and textify methods into functions because I figure I'll use them more than once. Also decided to split up examples into multiple pages. Currently at 1100 lines. Stardate 8/16/2020 - Spent about 1.5 hours. Finished all examples. Theoretically ready to submit, but I want some feedback first... currently at 1283 lines which makes it almost my longest webpage but not quite :( Total time spent : ~ 12 hours --> <html> <head> <meta charset="utf-8"> <title>SAL KA - An API Labs</title> <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@600&family=Righteous&family=Red+Rose:wght@300&family=Rubik:wght@300&family=Work+Sans:wght@500&display=swap" rel="stylesheet"> </head> <style> @keyframes fadeIn { from { opacity : 0; } to { opacity : 1; } } @keyframes lower { from { height : 0%; } to { height : 80%; } } * { margin : 0; padding : 0; } body { width : 100%; height : auto; overflow-y : scroll; overflow-x : hidden; position : absolute; display : block; background-color : #FCFCFC; } nav { padding : 15px 0; width : 100%; background-color : #FAC000; /* Possibilities: FAC000 - Yellow Jacket F00030 - Mellow Red 908060 - Dull Brown / z-index : 10; box-shadow : 0px 3px 5px black; } nav ul li { list-style : none; display : inline; } nav ul #title h1 { display : inline; margin : 0 5% 0 10%; font-family: 'MuseoModerno', cursive; letter-spacing : 2px; } nav ul #title svg { display : inline; position : absolute; transform : scale(0.2); top : -15px; left : 15%; } nav ul #title h5 { display : inline; margin : 0 5% 0 2%; font-family: 'Righteous', cursive; font-weight : normal; letter-spacing : -0.15px; font-size : 10px; position : relative; } nav ul .page-link { margin : 0 1%; padding : 1px 0.4%; font-size : 15px; font-family: 'Red Rose', cursive; letter-spacing : -0.1px; color : #000000; position : relative; z-index : 11; transition : all 0.2s; } nav ul .page-link:hover, nav ul .shown { cursor : pointer; color : #E0E0E0; transition : all 0.2s; } nav ul .page-link:before { content : ""; position : absolute; left : 0; bottom : 0; width : 100%; height : 5%; background-color : #303030; border-radius : 5px 5px 0 0; z-index : -1; transition : all 0.2s; } nav ul .page-link:hover:before, nav ul .shown:before { height : 100%; transition : all 0.2s; } .page { width : 70%; min-height : 600px; position : absolute; top : 100px; color : black; margin : 0 10% 0 10%; padding : 15px 5% 0px 5%; } .page h2 { margin : 20px 0; font-family: 'Work Sans', sans-serif; letter-spacing : -0.25px; } .page p, .page ul li { margin : 15px 0; font-family: 'Rubik', sans-serif; font-size : 17px; line-height : 1.5; letter-spacing : 0.1px; } .page .q { margin : 30px 0; padding : 5px 2% 5px 5%; border-left : 5px solid #FAC000; background-color : #EAEAEA; } .page footer { text-align : center; margin : 25px -25% 0 -25%; padding : 15px 2%; width : 142.5%; background-color : #303030; border-top : 5px solid #FAC000; color : white; float : left; } .page footer p { font-size : 15px; } .page code { white-space : pre-wrap; width : 100%; display : block; overflow-x : scroll; padding-bottom : 10px; color : #303030; font-size : 15px; } .lesson-select ul { list-style : none; } .lesson-select ul li { margin : 20px 0; position : relative; padding : 10px 5%; color : #FFFFFF; transition : all 0.4s; overflow : hidden; } .lesson-select ul li:hover { color : #303030; transition : all 0.4s; } .lesson-select ul li:before { content : ""; position : absolute; left : 0; top : 0; width : 100%; height : 100%; background-color : #303030; z-index : -2; } .lesson-select ul li:after { content : ""; width : 20px; height : 20px; transform : rotate(45deg); position : absolute; top : -10px; left : -10px; background-color : #FAC000; color : #FFFFFF; transition : all 0.4s; z-index : -1; } .lesson-select ul li:hover:after { content : ""; width : 100%; height : 1200%; top : -505%; left : -15%; position : absolute; background-color : #FAC000; color : #FFFFFF; transition : all 0.4s; } .lesson-select ul li:hover { cursor : pointer; transition : all 0.2s; } .docs #put { padding : 5px 2%; margin : 15px 5%; background : linear-gradient(#FFCA00, #F0B000); border : 1px solid #303030; border-radius : 0; color : #303030; transition : all 0.2s; } .docs #put:hover { cursor : pointer; background : linear-gradient(#FAC000, #E0A000); transition : all 0.2s; } .docs .editor { width : 98%; height : 300px; border : 2px solid #FAC000; padding : 5px 1%; font-family : sans-serif; overflow : scroll; white-space : pre-wrap; background-color : #303030; color : #FAC000; } .docs .documentation { list-style : none; padding : 0; } .docs .documentation li:nth-child(odd) { float : left; margin : 10px 0 10px -5%; } .docs .documentation li:nth-child(even) { float : right; margin : 10px -5% 10px 0; } .docs .documentation li { width : 45%; min-height : 110px; background-color : #FFFFFF; font-size : 14px; letter-spacing : -0.2px; color : #303030; padding : 5px 2%; border-radius : 2px; font-family: 'Rubik', sans-serif; line-height : 1.3; box-shadow : 3px 3px 4px 2px #606060; } .docs .documentation li a { color : #303030; display : block; text-decoration : none; border-bottom : 1px solid #303030; padding : 2px 0 5px 0; line-height : 1.2; } .chat ul li { list-style : none; background-color : #303030; color : #FFFFFF; padding : 5px 5%; } .chat ul li h3 a { color : #FFFFFF; font-size : 18px; } .chat ul li h3 em { font-weight : normal; font-size : 17px; } .chat ul li code { color : #FFFFFF; } .projects #search-username { width : 66%; margin : 15px 15%; padding : 2px 2% 4px 2%; outline : none; border-radius : 5px; border : none; background-color : #303030; color : #FAC000; font-size : 15px; } .projects #search-username:focus { box-shadow : 0px 0px 2px 3px #FAC000; } .projects ul li { list-style : none; width : 43%; height : 235px; padding : 10px 2%; overflow : hidden; border-radius : 5px; position : relative; } .projects ul li:after { content : ""; width : 100%; height : 100%; background-color : #303030; position : absolute; top : 0; left : 0; z-index : -2; } .projects ul li:before { content : ""; transform : rotate(-45deg); width : 200%; height : 20%; background-color : #FAC000; position : absolute; top : -25%; left : -90%; z-index : -1; transition : all 0.4s; } .projects ul li:hover:before { width : 200%; height : 200%; top : -50%; left : -50%; transition : all 0.4s; } .projects ul li:nth-child(odd) { float : left; } .projects ul li:nth-child(even) { float : right; } .projects ul li a { color : #FFFFFF; text-decoration : none; } .projects ul li:hover a { color : #303030; } .projects ul li img { width : 100%; overflow : hidden; display : block; background-color : #FFFFFF; } .projects ul li h4 { font-size : 14px; } .projects ul li h5 { font-size : 12px; } .hotlist #top-project { width : 50%; margin : 10px 25%; cursor : pointer; } .hotlist h3 { text-align : center; font-family: 'Rubik', sans-serif; } .hotlist #about { margin : 10px 5%; padding : 5px 3%; background-color : #303030; color : #FFFFFF; font-family: 'Rubik', sans-serif; } .hotlist #about h4 { margin : 5px 0; } .hotlist ul li { list-style : none; background-color : #303030; color : #FFFFFF; padding : 5px 5%; } .hotlist ul li h3 { text-align : left; } .hotlist ul li h3 a { color : #FFFFFF; font-size : 18px; } .hotlist ul li h3 em { font-weight : normal; font-size : 17px; } .hotlist ul li code { color : #FFFFFF; } .hotlist ul li a { color : #FFFFFF; } </style> <body> <nav> <ul> <li id = "title"> <h1 data-content = "API">API</h1> <svg viewbox = "0 0 100 100" width = "100" height = "100"> <path d = "M 0 7 C 0 7 0 0 7 0 L 7 0 L 93 0 C 93 0 100 0 100 7 L 100 7 L 100 68 C 100 68 100 75 93 75 L 93 75 L 7 75 C 7 75 0 75 0 68 Z" fill = "transparent" stroke = "black" stroke-width = "10"/> <path d = "M 40 75 C 40 75 50 95 0 95 L 0 100 L 100 100 L 100 95 C 100 95 50 95 60 75 L 60 75 Z" fill = "black"/> </svg> <br> <h5>Application Programming Interface</h5> </li> <li class = "page-link">Home</li> <li class = "page-link">Learn</li> <li class = "page-link">About</li> <li class = "page-link">Docs</li> <li class = "page-link">Beyond</li> </ul> </nav> <div class = "page home"> <h2>Welcome!</h2> <p>Hello there and welcome to the Stranothus API Labs KA, or SAL KA for short. Our goal is to teach you the basics of the KA application programming interface, commonly called the KA API.</p> <p class = "q">Now wait a second, isn't the KA API really difficult and something that only the greatest of all KA HTML legends with a minimum of 200 IQ use?</p> <p>Nope. It's actually really simple and easy to learn the basics although you can go further afterwards. The KA API that most "advanced" programmers use can be summed up in one jQuery function that we'll teach you in the lessons underneath "Learn".</p> <p class = "q">If the API is sooo simple, why doesn't KA teach it themselves?</p> <p>To be honest, I don't know. My best guess is that they aren't sure if they'll update it someday and then have to redo the entire course. They also don't have courses for Regular Expressions, SVG, raw Canvas, and a bunch of other hidden treasures of the web family.</p> <p class = "q">Alright then. How do I start learning?</p> <p>Just click on the navigation link titled "Learn" and start at lesson number one. This course will teach you all you need to know to make dashing projects utilizing the KA API in unique ways.</p> <p class = "q">Wow! This is great! Where do I subscribe?</p> <p>Lol I'm not going to be that guy. If you really do want to subscribe, I'll probably post a link somewhere down in the Tips & Thanks.</p> </div><!--home page--> <div class = "page lesson-select"> <h2>Lesson Select</h2> <ul> <li onclick = "pageSwap(5)"> <h3>Lesson 1</h3> <p>What is the API? Learn about the Application Programming Interface and how to use it on Khan Academy.</p> </li> <li onclick = "pageSwap(6)"> <h3>Lesson 2</h3> <p>Learn about how to access the API on KA with a special jQuery function.</p> </li> <li onclick = "pageSwap(7)"> <h3>Lesson 3</h3> <p>Learn the method to grab different API information.</p> </li> <li onclick = "pageSwap(8)"> <h3>Lesson 4</h3> <p>Start combining $.getJSON and endpoints to access API data in your programs.</p> </li> </ul> <h2>Examples</h2> <ul> <li onclick = "pageSwap(9)"> <h3>Example 1</h3> <p>Check out a combination of API and Regular Expressions that displays an entire thread!</p> </li> <li onclick = "pageSwap(10)"> <h3>Example 2</h3> <p>Search a coder's username and check out their projects! Brought to you via API.</p> </li> <li onclick = "pageSwap(11)"> <h3>Example 3</h3> <p>Check out what people are saying about the top program on the Hotlist!</p> </li> </ul> </div><!--lesson-select page--> <div class = "page about"> <h2>Why teach API?</h2> <p>Advanced application of API in programs nowadays on Khan Academy is scarce. Sure, people use the API in programs such as wikis based off of the Tips & Thanks of a program or the occasional Find such and such info program but that's using the API to create a project. I want to see people use API to advance or further a project.</p> <p>You see, there's knowledge and then there's application of knowledge. You might have memorized a hundred digits of Pi (I have) but unless that has some application in your life or your work, it's just wasted time.</p> <p>If somebody's here just to learn how to make an API program, they can go somewhere else. They should be here to further their ability to create webpages. The API is a tool to make a result, not a finished product. As far as it will take you, basic web design knowledge is superior.</p> <h2>How did you think of it?</h2> <p>I'd been thinking about creating an API labs for a while. Really ever since Primavera in early 2020. I'd been postponing it for a while but I finally decided to make it for the finale of The Coding Olympics.</p> <p>I was really inspired by T013's own API labs to be honest. That's where I was originally introduced to the KA API in a way that I could learn it. But since I'm being honest, his course was a little hard. I wasn't able to understand it for some time.</p> <p>So when I thought about making this, I wanted to make it be an indepth course that went step by step. I started with explaining the API, then with explaining which function you need to know so you can get and use the API. I followed that up with a lesson on endpoints and finised with some practice for general API and some tips.</p> <p>I don't think that I did a perfect course for learning the API. I didn't even scratch the surface. But I do hope that I made a course that will intruduce coders to the API in a simple way. And if someone doesn't understand, I'm going to answer every single question on this program. In fact, if you have a valid question that I <em>don't</em> answer within a week even though I've been online, notify me and I'll post a program of your choice on my subscription page to make up for it (and I'll answer your question).</p> </div><!--about page--> <div class = "page docs"> <h2>The Docs</h2> <p>This page is dedicated to documenting the Khan Academy API. It's by no means a complete documentation so if you find an endpoint or specifier that is not documented here, please inform me in the Tips & Thanks as necessary.</p> <p>For your convenience, you can use the editor below to check if an endpoint returns the information you need for your project. Simply use $.getJSON as you normally would with your endpoint, and type <code>displayResults(data)</code>. Then, click the output button to see what data your request returns.</p> <p>The editor is also equipped with a basic error system to tell you if you make a mistake. The code within it is run using eval but it is equipped to prevent changes to the website to keep users focused on the API.</p> <p>If any API requests have no description or a question mark descriptor, they have been discovered but no example of the data they return has been found yet. Please spend some time trying to find what these endpoints do and let me know.</p> <div id = "active-editor"></div> <button id = "put">Output</button> <h2>User Information Endpoints</h2> <p>All of the user related endpoints require <code style = "display : inline;">?username=</code> or <code style = "display : inline;">?kaid=</code>. Some users' endpoints may return less information than others because Khan Academy let's people choose whether or not to hide aspects of their account such as badges, showcase, and streak.</p> <ul class = "documentation endpoints" id = "user" style = "float : left;"> <li> <a href = "https://www.khanacademy.org/api/internal/user/profile?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/profile</a> <br> GET a user's general profile information. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/badges?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/badges</a> <br> GET a user's badge information. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/scratchpads?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/scratchpads</a> <br> GET a list of a user's projects. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/discussion/summary?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/discussion/<br>summary</a> <br> GET a summary of a user's discussion history. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/discussion/statistics?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/discussion/<br>statistics</a> <br> GET a user's statistics information. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/questions?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/questions</a> <br> GET a list of a user's questions. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/answers?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/answers</a> <br> GET a list of a user's answers. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/projectquestions?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/<br>projectquestions</a> <br> GET a list of a user's help requests. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/projectanswers?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/<br>projectanswers</a> <br> GET a list of a user's project help replies. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/comments?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/comments</a> <br> GET a list of a user's tips and thanks. </li> <li> <a href = "https://www.khanacademy.org/api/internal/user/replies?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/user/replies</a> <br> GET a list of a user's comments. </li> <li> <a href = "https://www.khanacademy.org/api/internal/signup/check-username?username=stranothus&format=pretty">https://www.khanacademy.org/<br>api/internal/signup/check-username</a> <br> GET a boolean showing if a username is available. </li> </ul> <h2 style = "float : left;">Scratchpads Endpoints</h2> <p style = "float : left;">All of the scratchpad (program) endpoints require the id of the intended program. The id is the unique set of numbers at the end of a program's link. Place the id wherever you see [program-id].</p> <ul class = "documentation endpoints" id = "program" style = "float : left;"> <li> <a href = "https://www.khanacademy.org/api/internal/scratchpads/5059654232932352?format=pretty">https://www.khanacademy.org/<br>api/internal/scratchpads/<br>[program-id]</a> <br> GET information about a program. </li> <li> <a href = "https://www.khanacademy.org/api/internal/scratchpads/5324705333526528/top-forks?format=pretty">https://www.khanacademy.org/<br>api/internal/scratchpads/<br>[program-id]/top-forks</a> <br> GET the top spin-offs of a project. </li> <li> <a href = "https://www.khanacademy.org/api/internal/discussions/scratchpad/5324705333526528/comments?format=pretty">https://www.khanacademy.org/<br>api/internal/discussions/<br>scratchpad/[program-id]/comments</a> <br> GET a program's comment. </li> <li> <a href = "https://www.khanacademy.org/api/internal/discussions/scratchpad/5324705333526528/questions?format=pretty">https://www.khanacademy.org/<br>api/internal/discussions/<br>scratchpad/[program-id]/questions</a> <br> GET a program's questions. </li> <li> <a href = "https://www.khanacademy.org/api/internal/discussions/scratchpad/4636740149280768/projectfeedback?format=pretty">https://www.khanacademy.org/<br>api/internal/discussions/<br>scratchpad/[program-id]/projectfeedback</a> <br> GET a program's help requests </li> <li> <a href = "https://www.khanacademy.org/api/internal/discussions/scratchpad/4636740149280768/clarification?format=pretty">https://www.khanacademy.org/<br>api/internal/discussions/<br>scratchpad/[program-id]/clarification</a> <br> ? </li> </ul> <h2 style = "float : left;">Discussion Endpoints</h2> <p style = "float : left;">Discussion endpoints need a discussion key to be inserted. A discussion key is a (seemingly) random combinations of letters. You can find the key for a Tips & Thanks, answer, question, help request, or help reply by clicking the link at the top next to the author's name that tells you how long ago the post was made. Copy the random set of characters and insert it to your endpoint.</p> <ul class = "documentation endpoints" id = "program" style = "float : left; width : 100%"> <li> <a href = "https://www.khanacademy.org/api/internal/discussions/ag5zfmtoYW4tYWNhZGVteXI_CxIIVXNlckRhdGEiHGthaWRfOTY1NTg3Mzk3MDI1NzU1NTc3OTk1NDUMCxIIRmVlZGJhY2sYgID27cyfrAsM/replies?format=pretty">https://www.khanacademy.org/<br>api/internal/discussions/<br>[key]/replies</a> <br> GET information about a program. </li> </ul> <h2 style = "float : left;">Miscellaneous Endpoints</h2> <p style = "float : left;">These endpoints are for general aspects of the Khan Academy programming platform.</p> <ul class = "documentation endpoints" id = "program" style = "float : left;"> <li> <a href = "https://www.khanacademy.org/api/internal/scratchpads/top?sort=3&limit=1&topic_id=xffde7c31&format=pretty">https://www.khanacademy.org/<br>api/internal/scratchpads/top</a> <br> GET info about the current state of the hot, recents, votes, or contests list. </li> <li> <a href = "https://www.khanacademy.org/api/internal/projecthelp?topic=computer-programming&format=pretty">https://www.khanacademy.org/<br>api/internal/projecthelp</a> <br> GET info about the current state of the help request list. </li> <li> <a href = "https://www.khanacademy.org/api/internal/projecteval?topic=computer-programming&format=pretty">https://www.khanacademy.org/<br>api/internal/projecteval</a> <br> GET info about the current state of the evaluation list. </li> <li> <a href = "https://www.khanacademy.org/api/internal/scratchpads/documentation/titles?format=pretty">https://www.khanacademy.org/<br>api/internal/scratchpads/<br>documentation/titles</a> <br> GET documentation for KA projects. </li> </ul> </div><!--docs page--> <div class = "page beyond"> <h2>Beyond this Course</h2> <p>While this course hopefully gives you a basic understanding of the API, it's by no means a quitting point. There's so much more to learn about the Khan Academy API and API for other websites. There's even possibilities with the KA API that are still being uncovered for use in projects.</p> <p>Why put in the effort to learn more? Well, hopefully the knowledge of the API shared here will become more or less commonplace soon. And when everyone is an API genius, no one will be. That's why you have to keep on learning. </p> <p>There's still a lot of things for you to learn about the API. Because loading takes a while, for loops don't work well for API requests. The index is changed by the time the data it returned. Can you find out how to either retain the index, or slow down the loop so that index corresponds with the correct reuqest?</p> <p>What about storing information in a program or post? Did you know that by using JSON.parse, you can save objects full of data outside of your program for usage between programs and users?</p> <p>The API can even be used to send POST, PUT, and DELETE requests once you learn how to authenticate. Once you have that down, you can combine it with storing objects of data in threads for retrieval with JSON.parse. Then you can create webpages where users can interact with each other without leaving it.</p> <p>There's so much that can be done with the Khan Academy API beyond simple GET requests. See what you can learn, and when you're done, see what you can teach.</p> </div><!--beyond page--> <div class = "page lesson-1 about-api"> <h2>Lesson 1 - About the API</h2> <p>What is an API? (Application Programming Interface) API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you're using an API.</p> <p>Now that may seem a little complex, but it's actually a relatively simple idea. For instance, when you post a Question on a programming video here on Khan Academy, it wouldn't do anything by itself. Instead, your computer sends an API request to create that Question.</p> <h2>API Requests</h2> <p>When the KA API makes that request to save your new Question so that other users can see it, it's called a <b>POST request</b> because you're posting new information.</p> <p>Now, that POST request added your question to a huge list of other questions on that video but right now nobody can see it. Why? Because that information is just floating around, it's not being accessed whenever somebody else is on that video.</p> <p>So whenever somebody goes to that video, their computer sends another API request to get all the questions that have been asked on that video along with other stuff like the Tips & Thanks. This kind of API request doesn't change any data so it's called a <b>GET request</b>.</p> <p>What if you want to edit your question? That's not exactly a POST request like when you first made it because you aren't changing all the data. Wait, but you're editing it so you <em>are</em> changing that data, right? Not really.</p> <p>You see, while you are changing what the question is, you aren't change who wrote the question, or how many votes the question has, or a bunch of other stuff about it. That information is also stored in the same file as your question. You just want to change the content of your question. For that you have to use a <b>PUT request</b></p> <p>The last request that we'll cover here is the <b>DELETE request</b>. The DELETE request is for if you ever want to delete an API file.</p> <h2>API Security</h2> <p>There are hopefully a few red flags coming up now. Just like the ability to comment is controlled by the API, so is nearly every other aspect of any internet account that can interact with another account. Even things off of the internet like your favorite video game probably use API.</p> <p>If you can use the API to make a new program on Khan Academy, why can't someone else use the API to hack your account and abuse it? This is a very real concern. This is why you need Authentication for certain API requests like POST, PUT, and DELETE (GET doesn't effect data so it's doesn't need authentication in most instances).</p> <p>Authentication is a little more complex and a bit beyond the scope of this course but I still want to mention it. Authentication is a means by which your computer makes sure that only users that have inputted your password can manipulate the important aspects of your account. Be warned though, there are ways for a website to get authentication for your accounts, even on KA, if you're not careful.</p> </div><!--lesson 1--> <div class = "page lesson-2 $.getJSON"> <h2>Getting API Data</h2> <p>On Khan Academy, the most frequent means of accessing API is through jQuery. For some reason, the normal JS method of accessing API data is a disallowed function but the jQuery method is allowed.</p> <p>Before you use the function, you do need to download jQuery onto your webpage by using a script tag.</p> <code> &ltscript src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">&lt/script> </code> <p>If you don't already know jQuery, you should check out <a href = "https://www.khanacademy.org/computing/computer-programming/html-js-jquery">Khan Academy's course</a>.</p> <p>We're going to use a function called $.getJSON for our API requests. It has two arguments that you need to know. The first is an <b>API endpoint</b>. An endpoint is the file name for the API data that you want to either get. We'll go over that a little more in the next lesson.</p> <p>The other argument is a function. The function is run as soon as the computer gets the API data. The function also usually has a parameter called data or something similar. When the function is called, that parameter is given the value of the API data that you have requested.</p> <p>The function should look a little like this:</p> <code> $.getJSON("endpoint", function(data) { console.log(data);//temporary so that you can see what data your endpoint returns }); </code> </div><!--lesson 2--> <div class = "page lesson-3 endpoints"> <h2>API Files - Endpoints</h2> <p>All the API information for Khan Academy that you'll be using in your projects can be accessed via an <b>endpoint</b>. An endpoint is a link but when you open it in a new tab, it'll show you a bunch of data instead of a website. Check out the endpoint for my Khan Academy account:</p> <p><a href = "https://www.khanacademy.org/api/internal/user/profile?kaid=kaid_96558739702575557799545&format=pretty">https://www.khanacademy.org/api/internal/user/profile?kaid=kaid_96558739702575557799545&format=pretty</a></p> <p>Now, I'm guessing you're a little confused on how that link led you to a bunch of information on my Khan Academy account. That's okay. Let's break it down.</p> <p>All of the Khan Academy endpoints that we're going to be using here start with</p> <p><code>https://www.khanacademy.org/api/internal</code></p> <p>This is more or less the folder where we get our API data files from. Now we have to add something to finish the endpoint. We want to get information about a user's profile (you can't get the password or other personal information however because of authentication). That means that we need to add</p> <p><code>/user/profile</code></p> <p>So we now have</p> <p><code>https://www.khanacademy.org/api/internal/user/profile</code></p> <p>And that's the entire endpoint! Now in this case, we don't to get the information for every single KA user. That's too much to load. So what we have to do is specify which user by either using the username or the KAID (an ID with a number value unique to each user. It's similar to a username but it cannot be changed).</p> <p>We aren't going to be adding /username though. Think about it, there are millions of users. So instead we add</p> <p><code>?kaid=kaid_96558739702575557799545</code></p> <p>It's not technically part of the endpoint but it specifies the data that we want to grab. This kind of specification is necessary for a lot of API endpoints. If you don't want to use tha KAID, you can substitute for the username like this:</p> <p><code>?username=stranothus</code></p> <p>But because usernames can be changed, it's better to use KAID. It's just generally more reliable. Now we add the KAID specifier on to the endpoint:</p> <p><code>https://www.khanacademy.org/api/internal/user/profile?kaid=kaid_96558739702575557799545</code></p> <h2>Extra Specifiers</h2> <p>There are several specifiers for KA API endpoints that I want to give you a reference for. I couldn't one already made and I'm sure I don't know them all but this list should get you a good way:</p> <ul> <li> <p><code>kaid=</code></p> <p>This specifier it used for endpoints involving user profile information. Set it to equal the preferred user's KAID.</p> </li> <li> <p><code>username=</code></p> <p>This specifier can be used in place of the KAID specifier. Make it equal the user's username.</p> </li> <li> <p><code>limit=</code></p> <p>This specifier is used whenever an API endpoint returns an array whose length is not otherwise limited.</p> </li> <li> <p><code>format</code></p> <p>This specifier can be set to equal "pretty" to make the data returned more legible.</p> </li> <li> <p><code>callback=?</code></p> <p>This specifier will be used later on when you want to be able to access API data to use within a program. It's value should always be the ? symbol.</p> </li> <li> <p><code>sort=</code></p> <p>This specifier is used for the https://www.khanacademy.org/api/internal/scratchpads/top endpoint. Learn more about this endpoint in the docs.</p> </li> <li> <p><code>sort=</code></p> <p>This specifier is used for the https://www.khanacademy.org/api/internal/scratchpads/top endpoint. Learn more about this endpoint in the docs.</p> </li> </ul> <p>Between the endpoint and the first specifier, there always needs to be a ? symbol and there also needs to be a & symbol between each specifier that you use. For example:</p> <p><code>endpoint?specifierOne=value&specifierTwo=value</code></p> <p>There isn't any one complete reference for KA API endpoints, but <a href = "https://www.khanacademy.org/computer-programming/i/5659937055735808">https://www.khanacademy.org/computer-programming/i/5659937055735808</a> is what I typically use. Play around with some of the endpoints and see which specifiers apply! Remember to start each endpoint with </p> <p><code>https://www.khanacademy.org</code></p> <p>You don't have to memorize them all but it's a good idea to get a feel for what each one does. When you're ready, head on over to the next section to see how to use your new endpoint knowledge in projects here on Khan Academy!</p> </div><!--lesson 3--> <div class = "page lesson-4 accessing-data"> <h2>Combining getJSON and Endpoints</h2> <p>It's time for you to finally get down to the nitty gritty! You've learned about $.getJSON and endpoints so now it's time to put them together and finally start creating some projects that utilize the API.</p> <p>Since you already know about endpoints and getJSON, there's not much left to teach. Simple write you function, slap your endpoint in, and utilize the data return. Here's a small example just in case you're forgetting:</p> <p><code>$.getJSON("https://www.khanacademy.org/ api/internal/user/profile?username=stranothus&format=pretty&callback=?", function(data) { console.log(data);//put something more creative here! });</code></p> <p>And there you have your API GET reuqest! You can use a variety of endpoints and specifiers to get specific information for all your needs. I went ahead and created a KA API documentation list in the sections titled "Docs" so that you can play around with all of them. Either click the link above the description or use a getJSON function to test the endpoint out with the editor in the docs.</p> <h2>Troubleshooting the API</h2> <p>The API is semi-advanced so you will run into problems with it. Because it's not super well known, a help request may go unanswered. You can always ask a question on this program and I'll do my best to answer (see the "About" section to find out what happens if I forget your question) but some basic troubleshooting knowledge will go a long way.</p> <ul> <li>API requests load slowly. If it takes a few seconds or even longer for you to get a result, that perfectly fine. This does mean that any code that you run after the request may end up running before you get a data return so be wary. Don't worry though, as long as you put your code that uses the data <b>inside</b> the request, it'll always be run when the data is loaded. This also means that if you try to loop through endpoints, the value of the index won't be inline with the requests.</li> <li>Some API requests require specifiers like ?username or ?sort. All requests intended to be used with JS require ?callback=? Check the docs to see what specifiers your endpoint requires. Look at any specifiers listed in the overview of each section and click the link for your endpoint to see what specifers are used there.</li> <li>Not all KA API requests return the same data depending on the user or program. For example, not all endpoints for a program will return an array of the questions asked because there might not be any questions on that program. Similarly, some users decide to hide parts of there profile. Those hidden bits won't be visible with the API either.</li> <li>These endpoints could be changed in the future if Khan Academy upgrades to a different system. It's not likely to happen soon but be on the lookout just in case.</li> </ul> <p>Good luck! I look forward to seeing what people make with their new knowledge of the API. If you make something really incredible, feel free to send me a link; I won't downvote or flag you for advertising unless you're begging for votes or attention.</p> </div><!--lesson 4--> <div class = "page exmples chat"> <h2>Displaying Chat</h2> <p>By using the discussions endpoints found in the docs, you can record what users are saying in a thread.</p> <ul id = "API-thread"></ul> </div><!--example 1--> <div class = "page exmples projects"> <h2>Displaying Projects</h2> <p>Because you can access a user's projects through an API endpoint and their username or KAID, you can create some cool projects where people can type in a username and see information about projects.</p> <input type = "text" placeholder = "Insert username" id = "search-username"> <ul id = "API-projects"></ul> </div><!--example 2--> <div class = "page exmples hotlist"> <h2>Displaying the Hotlist</h2> <p>You can combine API requets to get a lot of information. Right here, we're using three endpoints to find the top Hotlist program, get all the Tips & Thanks for that program, and then get all the comments for all the Tips & Thanks. Click a Tips & Thanks to see the comments for it.</p> <img id = "top-project"> <h3 id = "created-by"></h3> <br> <div id = "about"> <h4 id = "vote-count"></h4> <h4 id = "spin-offs"></h4> <h4 id = "posted"></h4> </div> <br> <ul id = "Tips&Thanks"></ul> </div><!--example 3--> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src = "https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.3/dist/html2canvas.min.js"></script> <script> //{ var pages = document.getElementsByClassName("page"); var pageLinks = document.getElementsByClassName("page-link"); var currentPage; function pageSwap(index) { if(typeof currentPage === "number" && currentPage <= 4) { pageLinks[currentPage].classList.remove("shown"); } for(var i = 0; i < pages.length; i++) { var p = pages[i].style; if(i === index) { p.animation = "1s fadeIn"; p.opacity = "1"; p.display = "block"; if(index <= 4) { pageLinks[i].classList.add("shown"); } } else { p.opacity = "0"; p.display = "none"; } } window.scroll(0, 0); currentPage = index; } pageSwap(0); for(var i = 0; i < pageLinks.length; i++) { pageLinks[i].dataset.index = i; pageLinks[i].addEventListener("click", function() { var index = this.dataset.index; pageSwap(Number(index)); }) } for(var i = 0; i < pages.length; i++) { pages[i].innerHTML += "<footer><p>Copyright Stranothus Studios and Quinn Hardbrook 2020</p></footer>"; } //} ch-ch-ch-ch-changes, time to face the page ch-ch-changes... //{ var nav = document.getElementsByTagName("nav")[0]; var navSVG = nav.getElementsByTagName("svg")[0]; var stickPoint = navSVG.getBoundingClientRect().bottom; function headerOnScroll() { if(document.documentElement.scrollTop > stickPoint) { nav.style.position = "fixed"; nav.style.top = -stickPoint + "px"; } else { nav.style.position = "relative"; nav.style.top = "0px" } } window.addEventListener("scroll", function() { headerOnScroll(); }); //} nav of ages, nav of ages, still scrolling, rock and scrolling... //{ var editor = document.getElementById("active-editor"); var button = document.getElementById("put"); var put = "Out"; var content = ""; editor.classList.add("editor"); editor.setAttribute("contenteditable", "true"); function displayResults(results) { editor.innerHTML = JSON.stringify(results).replace(/([\{\,\[])([^\{\,\[]+)/g, "$1<br>$2"); } button.addEventListener("click", function(event) { if(put === "In") { editor.innerHTML = content; editor.setAttribute("contenteditable", "true"); put = "Out"; } else { content = editor.innerHTML; editor.setAttribute("contenteditable", "false"); try { var c = editor.textContent; if(c.search(/document\./g) >= 1) { c = "displayResults(\"Don't hack the document. Be a nice little programmer.\")"; } eval(c); } catch(error) { displayResults("Error detected: " + error.message); } put = "In"; } button.textContent = put + "put"; }); var shift; editor.addEventListener("keydown", function(event) { shift = event.keyCode === 16 ? true : shift; if(event.keyCode === 9){ event.preventDefault(); } }); editor.addEventListener("keyup", function(event) { shift = event.keyCode === 16 ? false : shift; if(event.keyCode === 9){ document.execCommand('insertHTML', false, '&#009'); event.preventDefault(); } else if(event.keyCode === 57 && shift) { document.execCommand('insertText', false, ")"); } else if(event.keyCode === 219 && shift) { document.execCommand('insertText', false, "}"); } else if(event.keyCode === 219 && !shift) { document.execCommand('insertText', false, "]"); } }); //} no song for the editor... :( //{ var APIThread = document.getElementById("API-thread"); var APIProjects = document.getElementById("API-projects"); var searchUsername = document.getElementById("search-username"); var topImg = document.getElementById("top-project"); var topAuthor = document.getElementById("created-by"); var topVotes = document.getElementById("vote-count"); var topSpins = document.getElementById("spin-offs"); var topPosted = document.getElementById("posted"); var topTT = document.getElementById("Tips&Thanks"); //} all the DOM elements that I need to access for the examples. No song : ( //{ function timeSince(datePosted) { var timePosted = { v : datePosted, year : datePosted.slice(0, 4), month : datePosted.slice(5, 7), day : datePosted.slice(8, 10), hour : datePosted.slice(11, 13), min : datePosted.slice(14, 16), sec : datePosted.slice(17, 19), }; var dateNow = new Date().toUTCString(); var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var timeNow = { v : dateNow, year : dateNow.slice(12, 16), month : months.indexOf(dateNow.slice(8, 11)) < 10 ? "0" + (months.indexOf(dateNow.slice(8, 11)) + 1) : String(months.indexOf(dateNow.slice(8, 11)) + 1), day : dateNow.slice(5, 7), hour : dateNow.slice(17, 19), min : dateNow.slice(20, 22), sec : dateNow.slice(23, 25) }; var timeSince = { year : timeNow.year - timePosted.year, month : timeNow.month - timePosted.month, day : timeNow.day - timePosted.day, hour : timeNow.hour - timePosted.hour, min : timeNow.min - timePosted.min, sec : timeNow.sec - timePosted.sec, }; if(timeSince.month < 0) { timeSince.year --; timeSince.month += 12; } if(timeSince.day < 0) { timeSince.month--; timeSince.day += 30; } if(timeSince.hour < 0) { timeSince.day--; timeSince.hour += 24; } if(timeSince.min < 0) { timeSince.hour--; timeSince.min += 60; } if(timeSince.sec < 0) { timeSince.min--; timeSince.sec += 60; } var timeSincePosted; if(timeSince.year > 0) { timeSincePosted = timeSince.year + (timeSince.year === 1 ? " year ago" : " years ago"); } else { if(timeSince.month > 0) { timeSincePosted = timeSince.month + (timeSince.month === 1 ? " month ago" : " months ago"); } else { if(timeSince.day > 0) { timeSincePosted = timeSince.day + (timeSince.day === 1 ? " day ago" : " days ago"); } else { if(timeSince.hour > 0) { timeSincePosted = timeSince.hour + (timeSince.hour === 1 ? " hour ago" : " hours ago"); } else { if(timeSince.min > 0) { timeSincePosted = timeSince.min + (timeSince.min === 1 ? " minute ago" : " minutes ago"); } else { timeSincePosted = "A few seconds ago"; } } } } } return timeSincePosted; }//I wish that KA had better code folding so that this would stay folded because I literally NEVER want to look at this date arithmetic EVER again. I want to rip it out of existence, crumple it up, throw it into a trash can, take it out so I can throw it into a toilet, flush said toilet, and watch the fish choak on it when it gets out into the ocean. That's how much I hate it. Look at your own risk. //} if I could compute time since a POST request, the first thing that I'd like to do, is to KILL IT (because computing time since a date is a huge pain) //{ function cleanseText(text) { text = text.replace(/</g, "&lt"); text = text.replace(/(https:\/\/[^\s\n]+)/gi, "<a href = \"$1\" target = \"_blank\">$1</a>"); text = text.replace(/\n/g, "<br>"); text = text.replace(/\_([^\_]+)\_/g, "<em>$1</em>"); text = text.replace(/\([^\]+)\/g, "<strong>$1</strong>"); text = text.replace(/```([^`]+)```/g, "<code>$1</code>"); text = text.replace(/\`([^\`]+)\`/g, "<code style = \"display : inline;\">$1</code>"); return text; } //} bacon markdown, making bacon markdown, get the text and you make it into markdown //{ function reasonablifyLength(text, length) { return text.length > length ? text.substring(0, length) + "..." : text; } //} cuts text that's abnormally long and adds ... to the end. No song :( //{ $.getJSON("https://www.khanacademy.org/api/internal/discussions/ag5zfmtoYW4tYWNhZGVteXI_CxIIVXNlckRhdGEiHGthaWRfOTY1NTg3Mzk3MDI1NzU1NTc3OTk1NDUMCxIIRmVlZGJhY2sYgIDVm4i8sQkM/replies?format=pretty&callback=?", function(data) { for(var i = 0; i < data.length; i++) { var element = document.createElement("li"); element.innerHTML = "<h3><a href = \"https://www.khanacademy.org/profile/" + data[i].authorKaid + "\" target = \"_blank\">" + data[i].authorNickname + "</a> <em>" + timeSince(data[i].date) + "</em></h3><p>" + cleanseText(data[i].content); APIThread.appendChild(element); } }); //} example 1 //{ searchUsername.addEventListener("keyup", function(e) { if(e.keyCode === 13) { $.getJSON("https://www.khanacademy.org/api/internal/user/scratchpads?username=" + searchUsername.value + "&format=pretty&callback=?", function(data) { for(var i = 0; i < data.scratchpads.length; i++) { var index = data.scratchpads[i]; var element = document.createElement("li"); element.innerHTML = "<a href = \"" + index.url + "\" target = \"_blank\"><img src = \"https://www.khanacademy.org" + index.thumb + "\"><h4>" + reasonablifyLength(index.title, 20) + "</h4><h5>" + index.sumVotesIncremented + " votes</h5><h5>" + index.spinoffCount + " spin offs, " + timeSince(index.created) + "</h5></a>"; APIProjects.appendChild(element) } }); } }); //} example 2 //{ $.getJSON("https://www.khanacademy.org/api/internal/scratchpads/top?sort=3&limit=1&topic_id=xffde7c31&format=pretty&callback=?", function(data) { topImg.src = "https://www.khanacademy.org" + data.scratchpads[0].thumb; topAuthor.innerHTML = "Created by: <a href = \"https://www.khanacademy.org/profile/" + data.scratchpads[0].authorKaid + "\" target = \"_blank\">" + data.scratchpads[0].authorNickname + "</a>"; topVotes.textContent = data.scratchpads[0].sumVotesIncremented + " votes"; topSpins.textContent = data.scratchpads[0].spinoffCount + " spin offs "; topPosted.textContent = timeSince(data.scratchpads[0].created); topImg.addEventListener("click", function() { window.open(data.scratchpads[0].url, "New tab", "toolbar = yes, overflow: auto, scrollbars = yes, resizable = yes, width = 1000, height = 800, scroll"); }); $.getJSON("https://www.khanacademy.org/api/internal/discussions/scratchpad/" + data.scratchpads[0].url.split("/")[data.scratchpads[0].url.split("/").length - 1] + "/comments?format=pretty&limit=1000&callback=?", function(data) { for(var i = 0; i < data.feedback.length; i++) { var index = data.feedback[i]; var element = document.createElement("li"); element.innerHTML = "<h3><a href = \"https://www.khanacademy.org/profile/" + index.authorKaid + "\" target = \"_blank\">" + index.authorNickname + "</a> <em>" + timeSince(index.date) + "</em></h3><p>" + cleanseText(index.content) + "</p><h5>" + index.sumVotesIncremented + " votes, " + index.replyCount + " comments</h5>"; element.dataset.key = index.expandKey; element.addEventListener("click", function() { var e = this; if(typeof e.getElementsByTagName("ul")[0] === "undefined") { $.getJSON("https://www.khanacademy.org/api/internal/discussions/" + e.dataset.key + "/replies?format=pretty&callback=?", function(data) { if(data.length >= 1) { e.innerHTML += "<ul></ul>"; var ul = e.getElementsByTagName("ul")[0]; for(var i = 0; i < data.length; i++) { var index = data[i]; var element = document.createElement("li"); element.innerHTML = "<h3><a href = \"https://www.khanacademy.org/profile/" + index.authorKaid + "\" target = \"_blank\">" + index.authorNickname + "</a> <em>" + timeSince(index.date) + "</em></h3><p>" + cleanseText(index.content) + "</p>"; ul.appendChild(element); } } }); } else { var ul = e.getElementsByTagName("ul")[0]; if(ul.style.display === "none") { ul.style.display = "block"; } else { ul.style.display = "none"; } } }); topTT.appendChild(element); } }); }); //} huge example 3 </script> <!--thumbnail saver - actually made the thumbnail worse :/--> <!--script> //Thanks to Bluebird @Birdwatcher03 for this awesome canvas saver! var save = function() { html2canvas(document.body, { allowTaint : false, useCORS : true, width : window.innerWidth, height : window.innerHeight }) .then(function(canvas) { b64Img = canvas.toDataURL(); if(b64Img.length > 1033500) { alert("Oh no, the thumbnail is to big!\nTry making your webpage display size smaller."); } else{ window.top.postMessage(b64Img, "https://www.khanacademy.org/"); } }); }; var handleSave = function(e) { if (JSON.parse(e.data).screenshot) { setTimeout(function() { save(); }, 1000) } }; window.parent.savers = window.parent.savers \|\| 0; window.parent.addEventListener('message', handleSave); window.parent.savers += 1; for(window.parent.savers; window.parent.savers > 1; window.parent.savers -= 1) { window.parent.removeEventListener('message', handleSave); } </script--> </body> </html>
Folds	44,465,467,484,487,498,500,535,537,548,550,708,710,718,721,736,738,754,756,811,813,831,833,837,839,844,846,859,864,1264
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgLWgt4XPCQw
Votes	184
Spin-Offs	26
Type
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Quinn Hardbrook
Author Name	stranothus
Author ID	kaid_96558739702575557799545
Author Profile Access	PUBLIC

Archive Data

Added	1 years ago, 1707881033669
Updated	10 months ago, 1739381708981
Source Deleted	unknown