0 votes
by (160 points)
I'm trying to find the best way to embed a wikipedia page (from wikipedia.org) in a passage window. Preferably without the header etc, but just with the content.

Twine 2.1.3

Harlow 2.0.1

1 Answer

+1 vote
by (159k points)

The most common method used to embed the content of one HTML page within another is to use a HTML iframe element within your Passage.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<iframe src="https://en.wikipedia.org/wiki/Special:Random" title="Random Wikipedia Article" width="100%" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

... unfortunately this will result in the whole page being embedded.

The next Wikipedia specific option you have is to use Javascript & AJAX to reference the Mediawiki API to obtain a JSON representation of the page (or parts of it) you want, which you can then manipulate using Javascript to output the relevant section(s) on the current page of your story.

The Mediawiki API documentation is large with lots of options and only you know exactly which parts of the page's JSON data you want to display within your story, to help you work that out the documentation also includes an API Sandbox which you can used to test out the different options available to you.

WARNING: My knowledge is limited so you may want to get a more experienced Javascript writer to look at the following example.

The following example uses the jQuery library (that comes with Harlowe) to retrieve the JSON data for a Wikipedia page about Monte Cassino using AJAX, it then parses that data looking for the first HTML paragraph element within the text section of the data, and finally embeds that paragraph into an existing HTML div element contained within the Passage content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div id="article"></div>
<script>
$.ajax({
	url: "https://en.wikipedia.org/w/api.php?action=parse&format=json&callback=?&page=Monte_Cassino&prop=text",
		type: "GET",
        dataType: "json",
		headers: {
			'Api-User-Agent': 'Example/1.0'
		},
        success: function (data, textStatus, jqXHR) {
			// data contains 'title', 'pageid', and 'text'.
			var text    = $('<div></div>').html(data.parse.text["*"]);
			var summary = text.find("p:first-of-type");
			$('#article').append(summary);
        },
        error: function (errorMessage) {
        }
    });
</script>

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

NOTE: The above example contains NO real error catching code, and there are many things that can go wrong when either remotely requesting data from the Wikipedia API site or when trying to parse the JSON data that the request may of returned.

...