xkcd api, how to read explanations? - json

Question

xkcd comics has an json api to read meta data about one spesific comic/stripe.
eg. to get json data I can use:
https://xkcd.com/json.html
https://xkcd.com/2173/info.0.json
But it does not contain the explanation of the xkcd. It can be found on another page:
https://www.explainxkcd.com/wiki/index.php?title=2173:_Trainea_Neural_Net&oldid=176507
How can i get the explanation via an api as well, is it possible? (I dont want to use curl to scrape the entire Html page.)

Answer 1

If by explanation, you mean the text that appears when you hover over the comic, that is called the alt text. It is available in the JSON that is returned:
{
"month": "7",
"num": 2173,
"link": "",
"year": "2019",
"news": "",
"safe_title": "Trained a Neural Net",
"transcript": "",
"alt": "It also works for anything you teach someone else to do. \"Oh yeah, I trained a pair of neural nets, Emily and Kevin, to respond to support tickets.\"",
"img": "https://imgs.xkcd.com/comics/trained_a_neural_net.png",
"title": "Trained a Neural Net",
"day": "8"
}
If you meant the explanation from explainxkcd.com, then that is a different API. It uses the mediawiki platform (the same one used by Wikipedia). You can find the API documentation on their website, including an example on how to parse text.
Final result is this URL: https://www.explainxkcd.com/wiki/api.php?action=parse&page=2172:_Lunar_Cycles&prop=wikitext&sectiontitle=Explanation&format=json
Example output:
{
"parse": {
"title": "2172: Lunar Cycles",
"pageid": 22099,
"wikitext": {
"*": "{{comic\n| number = 2172\n| date = July 5, 2019\n| title = Lunar Cycles\n| image = lunar_cycles.png\n| titletext = The Antikythera mechanism had a whole set of gears specifically to track the cyclic popularity of skinny jeans and low-rise waists.\n}}\n\n==Explanation==\n{{incomplete|Created by a MOONBOT. Joke cycle explanations need to be expanded and title text needs to be explained. Do NOT delete this tag too soon.}}\n\nThis comic shows a mixture of real, scientific lunar cycles and cycles that are comedic or fictional in nature.\n\n*'''Nodal precession:''' The Moon's orbital plane is tilted slightly compared to the Earth's orbital plane around the sun (the {{w|ecliptic}}). This tilt is why we don't constantly see eclipses; most of the time, the Moon's orbital plane is tilted higher or lower than the Sun, so they generally don't cross each other. The two points at which these planes ''do'' cross are called {{w|lunar nodes}}. {{w|Nodal precession}} is the gradual rotation of these nodes over time, which for the Moon follows an 18.6 year cycle.\n\n*'''Apsidal precession:''' All orbits have two points where the orbiting body is either closest to, or furthest away from, the thing they are orbiting. These points are called {{w|apsides}}, and the imaginary line between them is called the ''line of apsides''. {{w|Apsidal precession}} is the gradual rotation of this line over time, which occurs in cycles of around 8.9 years for the Moon.\n\n*'''Phase:''' {{w|Lunar phase}} describes the change in shape of the sunlit side of the Moon as viewed from the Earth's surface, which is caused by the changing angle between Moon and Sun as the Moon revolves around the Earth. The cycle of lunar phases takes 29.5 days, a figure referred to as the ''synodic month''.\n\n*'''Distance:''' Because the Moon's orbit around the Earth is elliptical, its distance from the Earth varies slightly over the course of an orbit. This means that the moon's distance also follows a cycle which is the same as the length of one lunar orbit: approximately 27.5 days. This figure is referred to as the ''anomalistic month''. Note that the synodic month is (perhaps counterintuituvely) two days ''longer'' than the sidereal month - or to put it another way, it takes 2 more days for the Moon's phases to cycle than it does for the Moon to go around the Earth. This is due to the fact that the Earth is also moving ''around'' the Sun while the phases are going on, which means that the Moon has to spend 2 extra days \"catching up\" to the point at which the lunar phase cycle can restart.\n\n*'''Earth-Moon relative size''': This is a joke cycle; the Earth and Moon do not physically change size, nor does the Moon ever become larger than the Earth. This may be playing on the idea that the Moon often ''appears'' to change size to viewers on Earth, due to various factors; most commonly, this is due to the {{w|Moon illusion}}, which tricks the brain into perceiving the Moon as much larger than it really is. There are also so-called {{w|supermoon}}s, which occur when the full moon coincides with the Moon's closest approach to Earth; these actually do increase the Moon's apparent size, although by a relatively insignificant amount.\n\n*'''Lunar shape:''' Again, this is a joke cycle; the Moon does not actually change shape. A shape intermediate between circle and square is known as a {{w|squircle}}, a subclass of the {{w|superellipse}}.\n\n*'''Lunar mood:''' The moon does not have a mood, although humans can have moods that fluctuate over time, sometimes with a regularity akin to a cycle. Ironically, the section of the graph that shows a good (i.e. happy) mood has the graph line curving up then down like the mouth of a frown, and for the bad (unhappy) mood it curves down and then up, as in the mouth of a smile.\n\n* The final diagram shows many different cycles superimposed on each other, highlighting areas where several cycles are coinciding. This is likely satirizing the media trend of overhyping astronomical coincidences and giving them grand-sounding names:\n:*The light gray \"phase \u00d7 distance\" plot does not correspond to the product of periods given for phase and distance, which [https://i.imgur.com/0i0mcPn.png look like this] instead.\n:*A [[wikipedia:harvest moon|harvest moon]] is the traditional name for the full moon closest to the autumnal equinox, but there is nothing astronomically significant about it.\n:*A [[wikipedia:Supermoon|supermoon]] is a full or new moon when the Moon is closest to the Earth, resulting in a slightly larger-than-usual apparent size. A full supermoon is roughly 14% larger in diameter than when the Moon is furthest away. See also [[1394: Superm*n]].\n:*A [[wikipedia:blue moon|blue moon]] is the extra full moon in years with 13 full moons, which happens once every two or three years (hence the phrase \"once in a blue moon\"). Blue moons don't look any different from regular full moons.\n:*{{w|Astrology}} is a pseudoscience which claims that the positions of the celestial bodies can be used to predict human affairs. The chart jokingly suggests that astrology actually ''does'' work, but only within a very specific two-week timeframe.\n:*The [[wikipedia:Golden Age of Television|Golden Age of Television]] is said to have occurred in the 1940s and 50s, and the 2000s.\n:*There are no occurrences of '''dire moon''' or '''pork moon''' in the Google Books N-Gram viewer, which includes many works from the 1800s through 2008. A [[wikipedia:blood moon|blood moon]] refers to the moon during a lunar eclipse.\n:*While the popularity of '''skinny jeans''' ([[wikipedia:Slim-fit pants|slim-fit pants]]) does change over time, the idea that this is connected to a lunar cycle is also a joke.\n:*Finally, while the idea of a '''total eclipse of the sea''' seems absurd, [https://www.deepseanews.com/2017/08/what-happens-in-the-sea-during-a-solar-eclipse/ an eclipse was famously used to explain the migration of maritime animals]:\n:::''biologists were beginning to unravel the mystery of this \u2018false bottom\u2019\u2013a layer in the ocean that looks the the sea floor on the sounder but isn\u2019t\u2013which covered much of the ocean. This false bottom rises in up at night and sinks down during the day. This rising and falling is in fact caused by the largest migration of animal on Earth\u2013everything from fish, shrimp and jellyfish, moving hundreds of meters in unison up and down each day.... the moon moved into its place in front of the sun, daylight rapidly faded, and the scientists solved the migration mystery: the deep layer of animals began to rise. Bioluminescent creatures started to shine, and nocturnal creatures started a frantic upward thrust. As the world grew darker, they swam upward nearly 80 meters. But this frantic migration didn\u2019t last long. As the moon receded and the sun revealed itself, the massive animal layer did an about-face, scrambling back into the safety of the darkness.''\n:: (Backus, Clark, and Wing (1965) [https://sci-hub.tw/10.1038/205989a0 \"Behaviour of certain marine organisms during the solar eclipse of July 20, 1963\"] ''Nature'' '''4975:'''989-91.)\nThe '''{{w|Antikythera_mechanism|Antikythera mechanism}}''' mentioned in the title text is an ancient Greek machine, rediscovered in 1901, designed to calculate astronomical positions. The title text jokes that there is a set of gears on said mechanism that is used to predict the popularity of \"skinny jeans\" and \"low-rise waists.\" Since it was likely created in the 1st or 2nd century B.C., it is impossible for the creators to have had any knowledge of skinny jeans or low-rise waists - both are modern-day clothing fashions.\n\n==Transcript==\n{{incomplete transcript|Do NOT delete this tag too soon.}}\n\n:Understanding lunar cycles\n\n:Nodal precession\n:[A diagram showing a broad cosine-like wave with wavelength labelled as 18.6 years. To the right are two diagrams showing an orbital cycle moving in and out of plane.]\n\n:Apsidal precession\n:[A diagram similar to the one above but with a slightly shorter wavelength, labelled as 8.9 years. To the right are two diagrams showing an elliptical orbit around a planet and the same orbit rotated.]\n\n:Phase\n:[A diagram similar to those above with a shorter wavelength, labelled as 29.5 days. To the right is a diagram showing four phases of the moon: New, Waxing crescent, Waxinf gibbos, Full.]\n\n:Distance\n:[A diagram similar to those above with a shorter wavelength, labelled as 27.5 days. To the right is a diagram showing the distance of the moon from the Earth over time, with distances marked by arrows.]\n\n:Earth-Moon relative size\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Earth bigger' and an arrow pointing to the maximum labelled 'Moon bigger'. To the right are two diagrams of the moon and Earth, one showing the Earth bigger than the Moon and the other showing the Moon bigger than the Earth.]\n\n:Lunar shape\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Circle' and an arrow pointing to the maximum labelled 'Square'. To the right is a diagram showing a circle, a circle transforming into a square with outward arrows at each corner and a square transforming into a circle with inward arrows.]\n\n:Lunar mood\n:[A wave with long wavelength with an arrow pointing to the minimum labelled 'Bad' and an arrow pointing to the maximum labelled 'Good'. To the right are four emojis: :), :|, :(, :|]\n\n:[A superimposed graph of all the above waves. Different points on the graph are labelled: Harvest moon, Supermoon, Blue moon, Skinny Jeans popular, Super blood moon, Golden age of TV, Dire moon, Pork moon, Two week window in which astrology works, Total eclipse of the sea.]\n\n\n\n{{comic discussion}}"
}
}
}

Answer 2

I was wondering this myself today, and, no surprise, someone has done most of the hard work for us in the form of the xkcd explainer Chrome extension. Specifically, the repository that houses the code for the extension has a parser.js file (i.e., the hard work that has been done for us) and a main.js file built with the browser in mind but whose logic and functionality can easily be abstracted to still respect the primary goal and in different environments (e.g., Node.js): get the explanation of the XKCD comic in an easy-to-use fashion.
The code snippet below contains my reworking/merging of the parser.js and main.js files linked to above. The decent chunk of code can be copied and pasted right in the browser console to see the effect:
The example above is for comic 74 given by loadExplain(74) in the code below. Simply change num in loadExplain(num) to the number of the comic whose explanation HTML you want or loadExplain() for the most recent comic.
// parser.js
let comicid = 0;
let refNum = 0;
let refs = [];
function wikiparse(wikitext, num){
comicid = num;
let lines = wikitext.split(/\r?\n/);
let html = "";
let bulletLevel = 0; //level of bullet points
let quotes = 0; //previous line was quote
let tablerow = false; //true if currently in table row
for(let i = 0; i < lines.length; i++){
let line = lines[i];
if(line !== ""){
line = convertLine(line); //perform simple inline parsing
if(line[0] === "*"){ //bullet points
let bulletNum = line.match(/^\*+/)[0].length; //number of * in front of string
line = "<li>" + line.replace(/^\*+ */, "") + "</li>";
if(bulletLevel < bulletNum){ //start of new level of bulleting
line = "<ul>" + line;
bulletLevel++;
}
else if(bulletLevel > bulletNum){ //end of level
line = "</ul>" + line;
bulletLevel--;
}
}
else if(bulletLevel > 0){ //end of bulleting
line = "</ul><p>" + line + "</p>";
bulletLevel--;
}
else if(line[0] === ":"){ //quotes
line = "<dd>" + line.substring(1) + "</dd>";
if(!quotes){ //start of quote
line = "<dl>" + line;
quotes = 1;
}
}
else if(quotes){ //end of quote
line = "</dl><p>" + line + "</p>";
quotes = 0;
}
else if(line[0] === '{' && line[1] === '|'){ //tables
line = "<table " + line.substring(2) + ">";
}
else if(line[0] === '|' && line[1] == '-'){ //start of table row
line = "";
tablerow = true;
}
else if(line[0] === '|' && line[1] === '}'){ //end of table
line = "</table>"; //no rows?
tablerow = false;
}
else if(line[0] === '!'){ //table heading
line = "<th>" + line.substring(1).replace(/!!/g, "</th><th>") + "</th>";
if(tablerow){
line = "<tr>" + line + "</tr>";
tablerow = false;
}
}
else if(line[0] === '|'){ //table cell
line = "<td>" + line.substring(1).replace(/\|\|/g, "</td><td>") + "</td>";
if(tablerow){
line = "<tr>" + line + "</tr>";
tablerow = false;
}
}
else line = "<p>" + line + "</p>"; //regular text
html += line;
}
}
if(refNum > 0) {
let refFormatted = "<div class='references'><ol>";
for(let i = 0; i < refs.length; i++) {
refFormatted += "<li id='note-" + i + "'><a href='#ref-" + i + "'>↑</a><span>" + refs[i] + "</span></li>";
}
refFormatted += "</ol></div>";
html += refFormatted;
}
return html;
}
function convertLine(line){ //replace simple inline wiki markup
//headings and subheadings
//format ==<text>== -> <h2>, ===<text>=== -> h3, etc.
if(line[0] === '=' && line[line.length - 1] === '='){
let headingLeft = line.match(/^=+/)[0].length; //number of '='s on the left
let headingRight = line.match(/=+$/)[0].length; //number of '='s on the right
let headingNum = Math.min(headingLeft, headingRight);
if(headingNum >= 1 && headingNum <= 6){
line = "<h" + headingNum + ">" + line.substring(headingNum, line.length - headingNum) + "</h" + headingNum + ">";
}
}
//link to another xkcd comic
//format: [[<id>: <title]] or [[<id>: <title>|<id>]]
line = line.replace(/\[\[([0-9]+): [^\]]+(|\1)?\]\]/g, convertComicLink);
//link to within explain page
//format: [[#<heading>|<display>]]
line = line.replace(/\[\[#[^\]]+\]\]/g, convertHeadingLink);
//internal links
//format: [[<target>]] or [[<target>|<display>]]
line = line.replace(/\[\[[^\]]+\]\]/g, convertInternalLink);
// citation needed
//format: {{Citation needed}}
line = line.replace(/{{Citation needed}}/g, convertCitationLink);
//what if links
//format: {{what if|<id>|<title>}}
line = line.replace(/{{what if(\|[^\|]+){1,2}}}/g, convertWhatIfLink);
//wikipedia links
//format: {{w|<target>}} or {{w|<target>|<display>}} (or W)
line = line.replace(/{{[wW](\|[^}]+){1,2}}}/g, convertWikiLink);
//tvtropes links
//format: {{tvtropes|<target>|<display>}}
line = line.replace(/{{tvtropes(\|[^}]+){2}}}/g, convertTropesLink);
//other external links
//format: [http://<url>] or [http://<url> <display>] (includes https)
line = line.replace(/\[((http|https):)?\/\/([^\]])+]/g, convertOtherLink);
//references
line = line.replace(/<ref>.+<\/ref>/g, convertRefLink);
//bold
//format: '''<text>'''
line = line.replace(/'''(?:(?!''').)+'''/g, convertBold);
//italics
//format: ''<text>'' or ''<text>
line = line.replace(/''[^('')\n]+''/g, convertItalics)
.replace(/''.+/g, convertItalics);
return line;
}
function convertComicLink(link){
let firstSep = link.indexOf(":");
let secondSep = link.indexOf("|");
let id = link.substring(2, firstSep);
let display = "";
if(secondSep === -1) {
let title = link.substring(firstSep + 2, link.length - 2);
display = id + ": " + title;
}
else {
display = link.substring(secondSep + 1, link.length - 2);
}
return '' + display + '';
}
function convertHeadingLink(link){
let target = link.substring(3, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '' + display + '';
}
function convertInternalLink(link){
let target = link.substring(2, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '' + display + '';
}
function convertCitationLink(){
return '<sup>[<i>citation needed</i>]</sup>';
}
function convertWhatIfLink(link){
let firstSep = link.indexOf("|") + 1;
let secondSep = link.indexOf("|", firstSep);
let id = link.substring(firstSep, secondSep);
let title = link.substring(secondSep + 1, link.length - 2);
return '<a rel="nofollow" href="http://what-if.xkcd.com/' + id + '">' + title + '</a>';
}
function convertWikiLink(link){
let target = link.substring(4, link.length-2);
let display = "";
let separator = target.indexOf("|");
if(separator === -1){
display = target;
}
else{
display = target.substring(separator + 1);
target = target.substring(0, separator);
}
return '' + display + '';
}
function convertTropesLink(link){
let firstSep = link.indexOf("|") + 1;
let secondSep = link.indexOf("|", firstSep);
let target = link.substring(firstSep, secondSep);
let display = link.substring(secondSep + 1, link.length - 2);
return '<a rel="nofollow" class="external text" href="http://tvtropes.org/pmwiki/pmwiki.php/Main/' + target + '">' +
'<span style="background: #eef;" title="Warning: TV Tropes. See comic 609.">' + display + '</span>' +
'</a>';
}
function convertOtherLink(link){
let separator = link.indexOf(" ");
let target = "";
let display = "";
if(separator === -1){
target = link.substring(1, link.length - 1);
display = "[X]";
}
else{
target = link.substring(1, separator);
display = link.substring(separator + 1, link.length - 1);
}
return '<a rel="nofollow" href="' + encodeURI(target) + '">' + display + '</a>';
}
function convertRefLink(link) {
let display = link.substring(5, link.length - 6);
refNum++;
refs.push(display);
return "<sup id='ref-" + (refNum - 1) + "'><a href='#note-" + (refNum - 1) + "'>[" + refNum + "]</a></sup>";
}
function convertBold(text){
return "<b>" + text.substring(3, text.length - 3) + "</b>";
}
function convertItalics(text){
if(text.substr(-2) === "''") {
return "<i>" + text.substring(2, text.length - 2) + "</i>";
}
return "<i>" + text.substring(2) + "</i>";
}
// main.js
async function getJSON(url, callback){
const response = await fetch(url);
const responseJSON = await response.json()
callback(responseJSON);
}
async function loadExplain(comic = ''){
if (comic === '') {
let latestComic = await fetch("https://explainxkcd.com/wiki/api.php?action=expandtemplates&format=json&origin=*&text={{LATESTCOMIC}}");
latestComicJSON = await latestComic.json();
comic = +latestComicJSON.expandtemplates['*'];
}
getJSON("https://explainxkcd.com/wiki/api.php?action=query&prop=revisions&rvprop=content&format=json&origin=*&redirects=1&titles=" + comic, function(obj){
let pages = obj.query.pages;
let page = pages[Object.keys(pages)[0]].revisions[0]["*"];
let start = page.indexOf("{{incomplete|");
if(start === -1){ //incomplete tag at the beginning of explanation
start = page.indexOf("== Explanation ==") + 18;
if(start === -1 + 18){
start = page.indexOf("==Explanation==") + 16;
}
if(page[start] == "\n") start++;
}
else{ //complete explanation
start = page.indexOf("\n", start) + 1;
}
let end = page.indexOf("==Transcript==") - 1;
if(end === -1 - 1){
end = page.indexOf("== Transcript ==") - 1;
}
let rawExplain = page.substring(start, end);
let explanation = wikiparse(rawExplain, comic);
let readMore = '<p><b>Read more at the explain xkcd wiki.</b></p>';
console.log(explanation, readMore);
});
}
// get parsed explanation HTML
// loadExplain(); // for most recent comic
loadExplain(74) // for custom comic (1 - 2296 as of this answer posting)