Preview video:

Click on each tutorial section below or for more details see the video tutorial or the text tutorial or the short handout.

There is a Toggle Tutorial button in the green bar at the top that you can use to open and close this tutorial pane:

Drag in the following UI (User Interface) components and change their properties.

UI Comp.	Name	Properties
Label	Label1 (already exists)	Text - change the text to Martin Luther King and Malcolm X FontBold - check FontSize - 18
Image	Image (new)	Image - select “228px-MLK_ and_Malcolm_X _USNWR_cropped.jpg”
Layout/ Horizontal Arrang.	Horizontal Arrangement1	Width - Fill Parent
Button (put in Horizontal Arrang.)	Button1 (already exists) Rename to MLKButton	Image - change to mlk 152x129.jpg
Button (put in Horizontal Arrang.)	Button2 (new) Rename to MalcolmButton	Image - select malcolm152x129.jpg Text - erase Text for Button1
Media/ Player	Player2 (non-visible component) Rename to MalcolmPlayer (Rename Player 1 to MLKPlayer)	Source - select malcolmx.mp3

Click on the Blocks button at the top right to switch to the Blocks editor.

Now, we need to make the buttons toggle between pausing and starting each speech. For each button, click the Controls drawer and drag the If then block out into the button click. Click on its blue mutator button to drag in an else block.

When a button is clicked, if its speech player is already playing, we want to pause the speech. Otherwise (if it is paused), we want to start playing it again. And we want to always pause the other speech player.

First, change the MLKButton click event handler as described below and then, right click on the code and duplicate it, and change all the drop down menus to the MalcolmButton and MalcolmPlayer to do the next button.

Events	Actions (Algorithms)
MLKButton.Click	Call MalcolmPlayer.Pause. If MLKPlayer playing, MLKPlayer.Pause, else MLKPlayer.Play
MalcolmButton.Click	Call MLKPlayer.Pause. If MalcolmPlayer playing, MalcolmPlayer.Pause, else MalcolmPlayer.Play

In your App Inventor project, click on the Connect menu at the top and choose AI Companion.

Start up the AI Companion app on your mobile device and click on Scan the QR code (or enter the text code) by pointing your mobile device's camera to the computer screen to read the displayed QR code.

If you have problems, make sure your mobile device and your computer are on the same WiFi or other network. See the Troubleshooting page or try another method of connecting your device such as USB or using the emulator.

Make sure you test that each button starts and pauses and re-starts its own speech and pauses the other speech.