Building trust in media

CiteIt is developing new digital tools that help combat misinformation and selective quotations. These tools show the context surrounding the quoted media in order to build trust and understanding.

Try CiteIt:

Try Live Editor

Editor:



Instructions:

  1. Find a Quotation Online. (Try: google news)
  2. Paste the quote's text into the editor.
  3. Get the URL for the quote.
  4. Select the quote text in the editor.
  5. Click the CiteIt blockquote button to link the URL to the quote.
  6. When prompted, Paste the URL into the prompt box.
    • (If you click the "<>" button, you can inspect the html source)
  7. Click the "Save" button below:
    • (This will call the api.citeit.net webservice, )
    • Your newly contexified quote should appear below the "Save button".








Try WordPress Plugin

Video Transcript

Login

Use the following login credentials to access the Demo site:

username: public
password: demo22

Instructions:

Part 1: What CiteIt.net Looks Like

  1. The first step is to go to demo.citeit.net in your web browser. (this page)
  2. Next, Login with the “test” user and the password found on the page.
  3. The next step is to click “Posts” > Add New
  4. I’ll give the post a title and write my article, leaving room for the quote
    ( Time Elapses..)
  5. Now I’ll locate my quote on the internet to find the full context. In this case, the transcript is found on medium.org.
  6. I’ll copy the quote into my article
  7. I’ll copy the source’s URL to my clipboard
  8. In the editor, I highlight the quotation and
  9. Click on the CiteIt.net blockquote button, which the CiteIt.net WordPress plugin adds to the WordPress Editor as a custom button.
  10. Next, I Paste in my URL
  11. And click “publish
  12. To view the published post, I click on the post’s URL or click “Preview”

I can now click on the blue arrows above or below the quote to see more context.

Part 2: Popup Quotes

I can achieve the second variant of citation by performing the same steps, but selecting a different button — inline popup — to create a shorter inline quote.

  1. I click “Add New”
  2. I enter the quote title and post
  3. I copy the quote into the article
  4. I highlight the quotation
  5. I click on the other button: Inline popup.
  6. I pastee in the source’s URL
  7. I click publish.
  8. I can now view the resulting post byu cliking on the URL or clicking Preview.
  9. If I click on the quote’s link, the CiteIt.net contextual popup appears.

(NOTE: There still are some significant bugs.

Please report bugs by tagging your demo post with the tag “citeit-bugs“)

Get WordPress Plugin

How to Add CiteIt to Your Website:

Developers

Most individuals seeking to add CiteIt to their site will use a plugin like the CiteIt WordPress plugin.

If you are a developer, you can learn how to add CiteIt to your website by downloading the GitHub Sample Code.


View outline of video script

How to generate the citation context for this example:

Examples:

1: Contextual Popups

CiteIt.net allows inline popup quotations use the <q> tag:

In Chapter 5 of Pride and Prejudice, Elizabeth confesses how Darcy offended her, saying: I could easily forgive his pride, if he had not mortified mine.

2: Expanding Blockquotes

Here's a <blockquote> quote of a medium.com article, Tyler Cowen commented to David Wolpe about how social media strips away context:
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 canter 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.

You can mark up the quote with html tags such as <ul>, <li>, <b> or any other tag that will not change the text version of the quote when the hmtl is converted to text.


Download Sample Code from GitHub:

Get Sample Code on GitHub

View Html

View online html



More Examples

  • View Advanced Examples:
    • Citing YouTube Videos,
    • adding formating to quotes: bold, italics, lists,
    • adding source meta-data