Twitter widget

The Twitter widget facilitates in-context collaboration between you (the author) and your users (elearners). It helps you simulate a classroom environment in which elearners can ask questions to you and co-elearners in 'real-time'.

When you publish a project containing the Twitter widget, your users can ask questions from within the project without having to log on to Twitter. The questions appear to you and others at the appropriate context of the project in which they are asked.

While the questions can be asked only from a published project, the replies can be provided from any of the following:

  • Twitter- accessed through a web browser or a mobile device.

  • Within the published Adobe Captivate project using the Reply button that appears when the Twitter icon is clicked.

    Adding the Twitter widget to projects

    1. Download the Twitter widget from Adobe Exchange. The .zip file that you download contains the following files:

      • twitterwidget.swf — The Twitter widget that you can insert into your Adobe Captivate projects.

      • Twitteroauth.zip — The OAuth configuration file for authenticating Adobe Captivate when your users try to access the project with the Twitter widget.

    2. Ensure that you have met the prerequisites for using the Twitter widget. See Prerequisites for more information.

    3. Set up your project by providing a unique name in the Preferences. See Setting up the project for more information.

    4. Insert the Twitter widget in your project. See Inserting the Twitter widget in projects for more information.

    Prerequisites

    1. Install a Web server and PHP on a computer. You can opt for WAMP (for Windows) or MAMP (for Mac) that provides both.
      Note: The computer can be the one on which you have installed Adobe Captivate or any other computer on your network.
      Visit http://www.wampserver.com/en/download.php for downloading WAMP. For step-by-step instructions, see http://www.ehow.com/how_5921076_set-up-localhost-computer.html.
      Note: Ignore the last step in these instructions that says continue according to the instructions on the WAMP web site.

      Visit http://www.mamp.info/en/index.html for downloading MAMP. For step-by-step instructions, see http://documentation.mamp.info/en/mamp/installation.

    2. On the Windows machine, configure PHP and the web server. See Configuring PHP and Configuring the web server for more information. This step is not required on Mac as the required parameters are enabled by default with MAMP.

    3. Set up authentication for Adobe Captivate using OAuth. See Setting up authentication through OAuth

    Your users (elearners) do not have to meet these prerequisites. They just need a valid Twitter account to access the projects with the Twitter widget.

    Configuring PHP

    On Windows, enable the CURL library. To do so, click the WAMPSERVER icon in the system tray, select PHP > PHP extensions, and then click php_curl.

    To verify whether or not CURL is enabled, type http://localhost or http://localhost:8080 in a web browser, and click phpinfo() in the Tools section. Search for CURL on the page. Check if the row cURL support contains the value enabled.

    Configuring the web server

    On Windows, enable the rewrite module. To do so, click the WAMPSERVER icon in the system tray, select Apache > Apache modules, and then click rewrite_module.

    To verify whether or not the rewrite module is enabled, type http://localhost or http://localhost:8080 in a web browser, and click phpinfo() in the Tools section. Search for rewrite on the page. Check if the mod_rewrite is listed in the row Loaded Modules (apache2handler table).

    Setting up authentication through OAuth

    1. Right-click (Windows) or Control-click (Mac) the file twitteroauth.zip and click Extract. The contents are extracted into the twitteroauth folder.
      Note: twitteroauth.zip is available in the TwitterWidget.zip folder that you downloaded from Adobe Exchange.
    2. Place the twitteroauth folder into the root directory of your web server. To access the root directory:

      • (on Windows) Click the WAMPSERVER icon in the system tray and click www directory or navigate to <WAMP_installation_folder>/wamp/www.

      • (on Mac) Go to /Applications/MAMP/htdocs

    Setting up the project

    1. Open the project in which you want to insert the Twitter widget.

    2. Go to Edit > Preferences (Windows) or Adobe Captivate > Preferences (Mac).

    3. In the Preferences dialog box, click Information under Project in the Category list.

    4. In the Project Name field, specify a name for your project. Choose a unique name as this name will be used as the hash tag in Twitter for the course.

    Inserting the Twitter widget in projects

    1. Open the Adobe Captivate project in which you want to insert the Twitter widget.

    2. Click the first slide in the Filmstrip.

    3. Click Insert > Widget. Browse to the location where you have downloaded the twitterwidget.swf, and click open. The Widget Properties dialog box appears.

    4. In the Username field, type your Twitter account username. This account is considered to be the author's account.

    5. In the PHP Location field, specify the location of the twitteroauth folder that you placed in the root directory as a URL in the following format:

      http://<ipaddress_of_the_web_server>/<twitteroauth_folder_location>

      For example, if you have placed the folder in c:/wamp/www/Twitter/twitteroauth, specify the PHP location as follows:

      http://<ipaddress_of_the_web_server>/Twitter/twitteroauth

      On Windows, if you are accessing the web server home page using the port number 8080, then specify the port number for PHP location too. For example,

      http://<ipaddress_of_the_web_server>:8080/Twitter/twitteroauth

      On Mac, specify the port number 8888. For example, http://<ipaddress_of_the_web_server>:8888/Twitter/twitteroauth

    6. Click OK. The Twitter widget now appears on your slide. When you publish the output, the widget appears at the same position where it appears on the slide.

    7. In the Timing panel of the widget's Property Inspector, click Rest Of Project in the Display For drop-down list.

    Before you preview or publish your project, ensure that the status of the WAMP or MAMP server is 'Online'.

    • On Windows, move your mouse on the WAMP server icon in the system tray. If the status indicates that the server is 'Offline', click the icon and then click Put Online.

    • On Mac, launch MAMP. In the welcome screen, if you see a red button against Apache and PHP, click the adjacent buttons to put them online. The color of the buttons turn green.

    Accessing the project outputs with Twitter widget

    When you or your users try to access the project published with the Twitter widget, a prompt for the OAuth PIN appears.

    1. Click Generate to generate the PIN.

      If you have already logged into Twitter, click Allow to continue with the same account. To log in with a different account, click Sign-in.

      If you have not logged into Twitter yet, you will be prompted to provide your Twitter username and password.

      After you have logged in successfully, the PIN number appears in your default web browser.

      Note: If the PIN number does not appear in the browser window, allow the pop-ups in the browser, and try refreshing the page.

    2. Copy the PIN number and paste it into the OAuth PIN number field in the prompt that appeared in the project.

    3. Click Login.

    Searching for the project in Twitter

    Use the name of the project to search for it in Twitter, TweetDeck, or search.twitter.com. All the tweets (questions and replies) that occurred in the project are listed. You can then tweet a reply or a question.

    Collaboration workflow

    The questions and replies that were tweeted before you or an elearner started viewing the project are grouped into conversation threads. You (the author) get to see all the conversation threads on the current slide, irrespective of which frame you are viewing. However, other elearners can view only those conversations that have occurred until the frame that they are currently viewing.

    To view the conversation threads, click the Twitter icon.

    All the tweets that occur during the time when you or an elearner is viewing the project output are indicated instantly. You (the author) are notified about the tweets that occur on any slide in the project, irrespective of whether or not you have viewed that slide yet. However, for other elearners, the tweets are listed in the conversation list that they can view when they reach that slide (and frame).

    When a new question or a reply is tweeted, a second Twitter icon appears on the slide. This icon disappears as soon as all the tweets are viewed.
    Note: The second Twitter icon differs from the first one in the color of its wing. In the first icon, the wing of the bird is blue while in the second the color is yellow.

    All the viewed tweets are added to the conversation lists on the slide.

    The following steps outline the collaboration workflow between an author, Casey, and elearners, Alex and Jaden:

    1. Casey creates and publishes an elearning course with a Twitter widget.

    2. Alex starts viewing the course and right-clicks on a table on Slide 10 (frame 2), and asks a question.

    3. Jaden is also viewing the course at the same time.

      • If Jaden too is on Slide 10, frame 2 or has already viewed the slide, an additional Twitter icon appears on Jaden's machine. Jaden can click the icon to view the question and click reply to provide an answer. As soon as Jaden views the question, the additional icon disappears and the tweets (question and answer) are added a as a conversation thread.

      • If Jaden has not yet viewed Slide 10, frame 2, the question from Alex appears as a conversation thread. Jaden can click the original Twitter icon to view the question.

    4. Casey is also viewing the course at the same time. Irrespective of which slide or frame Casey is viewing, an additional Twitter icon appears as soon as Alex or Jaden ask a question.

      • Casey can click the tweet to go to the context (slide 10, frame 2) and reply to the question.

      • Casey can access the older tweets by clicking the original Twitter icon.

    How is the 'context' of tweets determined?

    The following factors determine the context of a question:

    • Frame number

    • The location on the slide where the elearner clicks to ask a question

    If you or other elearners are viewing the published project, clicking the conversation headers or the new tweets takes you to the context (slide and frame).

    When you or other elearners view the tweets in the project using Twitter, the context is provided as follows:

    FrameNumber, X co-ordinate, Y co-ordinate

    For example, 245; 400; 194.

    Asking questions

    Only elearners (not the author) can ask a question in the project published with the Twitter widget.

    1. Right-click (Windows) or Control-click (Mac), select Ask Question

    2. Click inside the Ask A Question dialog box, and type the question

    3. Click Send.

    Replying to questions

    You (the author) and the elearners can reply to any question in the project using the Twitter icon.

    1. Click the Twitter icon to view the questions.

    2. Click Reply to reply to a question or a conversation thread. To address your reply to a specific person, click the arrow mark adjacent to the name of the person.

    3. Type the reply and click Send.