Demos

Using CiteIt with different Media Types

CiteIt is developing tools that allow you to add context to your media, whether it is written word, audio, video, wikipedia, or twitter.

1. Writing


A) Expanding blockquote: #

When to Use:

Use Contextual blockquotes when:


Click on the blue arrows above and below the quote to expand the context:



Tyler Cowen interviewed Rabbi David Wolpe as part of his Conversations with Tyler Series. Rabbi Wolpe said:

I think that Judaism has the same problem that any thick civilization has in a world in which, as you say, context is stripped away. And not only is context stripped away, but attention to any one thing is scanter and less than it used to be. So, for example, a lot of Jewish commentary is based on your recognizing the reference that I make. Who recognizes references anymore? Because people don’t spend years studying books.

HTML code:
<blockquote cite="https://medium.com/conversations-with-tyler/rabbi-david-wolpe-leaders-religion-israel-identity-7c159c2ed2d">
I think that Judaism has the same problem that any thick civilization has in a world in which, as you say, <strong>context is stripped away</strong>. And not only is context stripped away, but attention to any one thing is scanter and less than it used to be. So, for example, a lot of Jewish commentary is based on your recognizing the reference that I make. Who recognizes references anymore? Because people don’t spend years studying books.
</blockquote>
Learn More about the CiteIt javascript library and webservice that looks up the quote context.

B) Contextual Popup #

When to Use:

Use Contextual Popups when:


Jane Austen’s “Pride and Prejudice” draws its title, in part from a line where the books’s main character, Elizabeth says:  I could easily forgive his pride, if he had not mortified mine.   

↑ Click on blue-grey quote above: ("I could easily forgive his pride ..")


HTML code:
.. Elizabeth says: <q cite = "https://en.wikisource.org/wiki/Pride_and_Prejudice/Chapter_5" data-citeit-citing-url = "https://en.wikisource.org/wiki/Pride_and_Prejudice/Chapter_5/">  I could easily forgive <i>his</i> pride, if he had not mortified <i>mine.</i></q>   

Developer mode:
CiteIt Developer Mode (Larger "developer mode" image)

2. Wikipedia Citations #


Article Popups

Wikimedia already has contextual popups which appear when a reader mouses over a linked article.

Here’s a screenshot of the popup that appears on the Los Angeles Lakers article when a reader mouses over the link to the Los Angeles Sparks Basketball team.

Wikipedia: Article Popup Example: popup used by Wikipedia article

Contextual Popup

Below is a screenshot of the Ruth Bader Ginsburg article mockup which shows the CiteIt Contextual Popup that appears when a reader clicks on the light grey-blue text of a contextual quotation, in this case: “Ginsburg precedent“.

Wikipedia: Article Popup

Sample Wikipedia Articles #

Example: Proposed Ruth Bader Gingsburg Wikipedia article ↓ with CiteIt Contextual Popup

Click on an image below to view sample Wikipedia articles that feature contextual quotations.





3. Substack #

Mockups of what Substack articles would look like if they were using CiteIt.net:




4. YouTube transcripts #


Malcolm Gladwell Interview: "Westerns"

Consider how adding the video's YouTube URL to the blockquote's cite tag allows the CiteIt.net javascript library to automatically embed the video and lookup the surrounding transcript (if a matching transcript is found).


↓ Click: "Expand: Show Video Clip" ↓

Here is a quotation from Joe Rogan's interview with Malcolm Gladwell.

  1. a Western is where is conceptually a world in which there is no law and order and a man shows up and imposes personally law and order on the territory the community right
  2. so there is also a eastern what is in Eastern and Eastern is a place where by contrast is a story where they're like I got this straight it was four types the Eastern is where there is law and order there is so there are institutions of Justice but they are have been subverted by people from within so an Eastern would be the Serpico is an Eastern it's a crooked cop who is it's the bad apple who has you know screwed up there there's lots of tons and tons of of Hollywood movies are Easterns
  3. the northern is the case where law and order exists and law notre is morally righteous system works law know that show law and order is a northern it's a functioning apparatus of Justice which reliably and accurately produces the right the correct result in confronting criminality every single day when it's on TV
  4. the southern is where the the entirely the southern is all John Grisham novels or Southern's they are where the entire apparatus is corrupt and where the reformer is not an insider but an outsider

HTML Formatting (such as bold and italics) is allowed within a citation, so long as the plain-text version matches the original quote's plain-text version.


HTML code:
<blockquote cite="https://youtu.be/OnEjzmR9Hvw?t=231">
<ol class="num">
<li>a <b>Western</b> is where is conceptually a world in which <b>there is no law and order</b> and a man shows up and <b>imposes personally law and order on the territory</b> the community right
<li>so there is also a <b>eastern</b> what is in Eastern and Eastern is a place where by contrast is a story where they're like I got this straight it was four types the Eastern is where there is law and order there is so <b>there are institutions of Justice</b> but they are have been <b>subverted by people from within</b> so an Eastern would be the Serpico is an Eastern it's a <b>crooked cop</b> who is it's the bad apple who has you know screwed up there there's lots of tons and tons of of Hollywood movies are Easterns</li>
<li>the <b>northern</b> is the case where law and <b>order exists and law notre is morally righteous system</b> works law know that show law and order is a northern it's a functioning apparatus of Justice which reliably and accurately produces the right the correct result in confronting criminality every single day when it's on TV</li>
<li>the <b>southern</b> is where the the entirely the southern is all <b>John Grisham novels</b> or Southern's they are where the <b>entire apparatus is corrupt</b> and where the reformer is not an insider but an <b>outsider</b></li>
</ol>
</blockquote>

View Sample article with Contextual Video Popups:



5. Audio/Podcasts #


I would like to add support for audio-citations, especially for transcription of podcasts and radio.


Potential Sample Podcasts:


6. PDFs #

The hosted CiteIt Webservice does not current support PDFs, but this functionality is available if the application is self-hosted:

Electronically-Produced PDFs

Digitally created PDFs.

1) Children's Book (Pdf) #

The webservice converts this children's book into a text-version.


>> Hammy said: we are very careful so we aren't caught.   (page 6)


<p>Hammy said: <q cite="https://cdn.shopify.com/s/files/1/2081/8163/files/007-HAMMY-THE-HAMSTER-Free-Childrens-Book-By-Monkey-Pen.pdf>we are very careful so we aren't caught.</q></p>




2) Digital Journal Article: (Pdf) #

(I noticed that this example is broken, but I didn't take it down because you can still learn from it.)



The webservice converts the article to a series of text-based pages, from which contextual lookups can be made.


For example, the typical finding that conservatives endorse the moral value of respect for authorities could be an artifact of the tendency for participants to assume that authorities are conservative.


<blockquote cite"https://read.citeit.net/media/pdf/voelkel-brandt-the-effect-of-ideological-identificaation-on-the-dendorsement-of-moral-values-depends-on-the-target-group.pdf"> For example, the typical finding that conservatives endorse the moral value of respect for authorities could be an artifact of the tendency for participants to assume that authorities are conservative.</blockquote>




3) Scanned Book (OCR Pdf) #


<p>Prince Andrew said: <q cite="https://read.citeit.net/media/pdf/samples/war-and-peace-pages-76-77.pdf">I don't like your Mademoiselle Bourienne at all</q>.</p>

Notice that this page contains two columns:








7. Twitter #


Here is an a example of what Twitter could look like if a quote were linked to its source with a contextual popup.

PBS Newshour @Newshour 7h

Study asks if vaccinated people can transmit the virus, Fauci says

↑ Click grey-blue text to view contextual popup ↑




Demo Site Examples#




Developer Sample Code #

These examples depend upon the CiteIt javascript library being installed on the quote's webpage.