10.07.2015 Views

Instructions for Multiple Choice Quiz App - MIS Laboratory

Instructions for Multiple Choice Quiz App - MIS Laboratory

Instructions for Multiple Choice Quiz App - MIS Laboratory

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

ACTIVITY 2: SOLAR COOKERSsource: Bonneville Environmental Foundation (BEF)STEP 2: Construct the Reflectors1. Cut four pieces of cardboard with the dimensions 22 x 24 x 12,as shown in the photo. When the pieces are assembled, thesedimensions will create a 67º angle, which will maximize the focusof light at the base of your solar cooker.2. <strong>App</strong>ly glue to one side of the cardboard pieces you’ve cut out andcover the glued side with tin foil.3. Cover all four pieces of cardboard in tin foil.4. Tape the four pieces of cardboard together with duct tape or anotherheavy, durable tape. Then connect the far ends to completethe reflector.5. To create the base of the solar cooker, cut a piece of cardboardthat will fit the opening at the base of the solar cooker. Paint oneside of this piece of cardboard black. Let the square dry. When thesquare has sufficiently dried, tape the square to the base of thereflectors with the black side facing up.48Solar 4R Schools Activity Guide & Teacher Manual L3: Grades 10-12


OverviewThe objective <strong>for</strong> this hands-on lab is to get you used to the steps <strong>for</strong> submitting an application <strong>for</strong> theWindows Store. The easiest way to do this is to build an application and then submit it to the store.While there are many tutorials on building applications, we will be using one of two templates to buildan app quickly so that we can learn how the process of submitting an application to the store. Theapplication will be an app that centers around an interest of your choosing. We will take the basic stepsneeded to gather the data needed <strong>for</strong> the templates, add the content to the application, and then showyou how to submit your application to the store.ObjectivesThis lab will show you how to: Use the basic parts of visual studio 2012How to sign up <strong>for</strong> Dream Spark if you are a studentBuild an app <strong>for</strong> Windows 8 using a templateSubmit an application to the storeSystem RequirementsYou must have the following items to complete this lab:Microsoft Windows 8 Release PreviewMicrosoft Visual Studio 2012 Express, Professional, or Ultimate Edition.Additional Software that will help youThis software will make the process eaiser:1. Paint.Net - http://GetPaint.NetExercise 1: Decide on your application Idea


As we stated in the overview, the app you will create will be a multiple-choice quiz that can either be fun(think Trivia game) or educational, or both. The only limitation is that you will need a body of questions,answers and reasonable sounding “distractors” (the wrong answers). You should have a minimum ofthree answer choices but you can have to five.Task 1 – Decide on an ideaThere are an unlimited amount of topics you can build a quiz around. Below you will find suggestions onthings you can create a quiz application. First, select your idea and then check against the list of appsthat were created already with this template to see if someone has already done this. (This is not acheck against the Windows Store, but against the people that will be using this template. We do notwant 100 farm animal apps that all look the same) There are plenty of ideas to choose from, here aresome examples below to get you thinking:Foreign Language GrammarTV Series TriviaMovie TriviaHistory TriviaSchool Subject Practice TestsLocal LandmarksSports TriviaCertification Practice TestsHobby TriviaAs you can see, this is just a partial list to get you started thinking. There are two major things you needto consider:1. How big is the potential community of people that might be interested in this subject domain?2. How many questions would make this a useful app? Probably 50 – 100 question seems a goodnumber of questions to make this quality but higher might be even better Ten seems too few;20 seems like a minimum number <strong>for</strong> version 1.0 and you can increase the number of questions<strong>for</strong> subsequent versions.3. Has it been done WITH THIS Template already? To check go to this URL :Exercise 2: Design Your QuestionsTask 1 – Design Your QuestionCurrently the template is designed so that a picture (accompanied by a sound) appears <strong>for</strong> eachquestion. So every question will need a picture (and optionally a sound). Start with an Excel spreadsheet


and in Column A write a one or two word description of the picture you would like to use. In Column Bwrite the correct answer. In columns C, D, E & F write plausible wrong answers. In Column G write a oneor two word description of the sound if you are using sound effects with each question. Then repeatuntil you have at least 20 questions.Task 2 – Collect Pictures1. Images <strong>for</strong> the Questions – One per questionLarge, square, high resolution graphics are best: between 2000x2000 and 3000x3000 pixels.Pixel depth should be kept low so the files sizes stay as small as possible. There isn’t really afile size limitation, but the larger the individual file sizes, the larger the download and startupof the app and slower per<strong>for</strong>mance is likely to be. If per<strong>for</strong>mance is too low your app won’tget approved into the store. An ideal file size is 300KB or less, but you can go as high as 3MB.If your quiz focuses more on content versus visual identification, then you can just write yourquestions in PowerPoint and use the Windows Snip Tool to create images of your textquestions..PNG file <strong>for</strong>mats are preferred over JPG <strong>for</strong>mats because the file sizes are smaller, and .PNGfiles support transparent backgrounds, which contribute to higher-quality app appearance.2. Images needed <strong>for</strong> the <strong>App</strong>lication – You will need the following images <strong>for</strong> your applicationa. Logo.png – 150 x 150b. SmallLogo.png – 30 x 30c. StoreLogo.png - 50 x 50d. SplashScreen.png – 620 x 300e. Background.jpg -- Big.. At least 1024 x 760 ( Sizes you would normally use <strong>for</strong>wallpaper)f. SummaryImage.png – 350 x 350g. AltAdvert.jpg 640 x 512 (if you are using ads, this will show if the ads are notworking… if you are not, you don’t need this)NOTE: The images you find will not already be these sizes, you will have toconvert them to these sizes using Notepad or Paint.Net (or other photomanipulation software) <strong>Instructions</strong> on how to do this can be found in theappendix.


Do not steal images. There are plenty out there under the creative commons license (cc).You can search on Bing, Google, Flicker, or check out the resources on Code Fosterhttp://codefoster.com/post/2012/11/20/mediaFor the logos and the splash screen, try to find something that looks good on a white or blackbackground, since this will look the best in the template. Make sure the image is big enough<strong>for</strong> the splash screen. It is easier to scale down than scale up. Also, as stated, look <strong>for</strong> animage that has a white background if all you have to modify the image with is paint (See<strong>App</strong>endix)When looking <strong>for</strong> the Background.jpg make sure, you are getting a large file. On Bing, makesure you select the “Wallpaper” size when searching; it is in the upper left hand corner.For Google, you will need to first Click on Search Tools and then Select a size greater than.


Since there are a few different ways to modify your images <strong>for</strong> the application, please see<strong>App</strong>endix 3: Using Paint.Net to modify Images OR <strong>App</strong>endix 4: Using Paint to modify images.Of course, if you are used to another program to do image editing, you may use that also.That should be all the data you need <strong>for</strong> your application. Save your image files <strong>for</strong> now in a folderwhere you can find it easily.Exercise 3: Add your in<strong>for</strong>mation to thetemplate2. For this section of the lab, you will need to use Visual Studio 2012. Make sure you unzipped theproject from the zip file (Most likely called infohub.zip)3.Task 1 – Get the project up and running1. You will need Visual Studio 2012 Express <strong>for</strong> Windows 8 (its free) to develop <strong>for</strong> Windows 8http://www.microsoft.com/en-us/download/details.aspx?id=30664


2. You will also need the MS Advertising SDK --You can download it at http://go.microsoft.com/?linkid=9815330 Install it after you installVS2012 Express, Professional, or Ultimate.These are extra steps you need to take if you don’t already have Windows 84. If you have a mac you can use bootcamp or VMWare Fusion (note Bootcamp and VM Fusion arenot free and Microsoft doesn’t have any licenses <strong>for</strong> these products).http://www.intowindows.com/install-windows-8-on-mac/3. If you don’t have a Windows 8 Machine, you can download Windows 8 from your schoolDreamSpark Premium account and create a BootToVHDhttp://blogs.technet.com/b/haroldwong/archive/2012/08/18/how-to-create-windows-8-vhd<strong>for</strong>-boot-to-vhd-using-simple-easy-to-follow-steps.aspxhttp://blogs.technet.com/b/haroldwong/archive/2013/01/25/configuring-mac-<strong>for</strong>-windows-8-and-windows-phone-development-with-vmware-fusion-5-02-installing-and-configuring-part-1-of-3.aspx5. Go to http://aka.ms/cis105 and6. Unzip (Extract) the file w8templates-xxxx . Place the entire extracted folder in yourDocuments/Visual Studio 2012/Projects folder.Once unzipped you will see three folders and two files.


Note, there are two templates in the download. We will only be working with the <strong>Multiple</strong> <strong>Choice</strong>project in this document.7. Double click on the Windows 8 QuickStart <strong>App</strong> Template.sln to open the solution.8. You will get 3 dialog boxes that you don’t need to worry aboutClick NOClick OKClick OK (Both times)9. Once the project opens up in visual studio we will need to clean and rebuild it. (this issometimes needed because of being zipped). If you are using Visual Studio Professional or


Ultimate Editions, right click on the Project in the Solution Explorer (Not the solution) and selectClean. If you are using the Express Edition select the project, and then click on the “Build” taband then click “Clean”.The output windows will show Clean: 1 succeededRepeat this process but instead of selecting Clean, select RebuildThe output will show Rebuild All: 1 Succeeded(You may have to do this twice)Once this is completed, right click the <strong>Multiple</strong><strong>Choice</strong> project file and select “Set as StartupProject”.


Then hit F5 on your keyboard or the click the green “run” arrow on the tool bar to run theproject. (Say yes to allow location) When the project runs, you should see the Farm Animal <strong>Quiz</strong>start up screen. This is the app we will be modifying by substituting your images and sound files<strong>for</strong> the ones in the project. If you get an error message down in the bottom of the screen thatsays something about the Ad SDK and the app doesn’t launch, you <strong>for</strong>got to install the Ad SDKper the instructions in Exercise 3, Step 2 above.Task 2 – Modify the Contents of the Media Folder10. In the solution explorer, open up the “Media” folder. You will see the background andquestion image files (.PNG) and the sound files (.WAV). Eventually we will replace all thosefiles with pictures and sounds <strong>for</strong> your app. But <strong>for</strong> now, let’s experiment a bit and justreplace the background file.


Right-click the Media Folder, select Add>Existing Item and browse to the background pictureyou created in Exercise 2, Task 2. Click Yes when asked if you want to replace the existingfile.Now run the app again by pressing F5 or the “Run” arrow and the quiz should launch withthe new background. That is pretty much going to be the process <strong>for</strong> all the content in theMedia Folder, except instead of replacing, you’ll delete the image and sound files and addyour own.IMPORTANT NOTE!!!! Each time you change one line of code, build and test the app tomake sure you didn’t change something incorrectly. If you change more than one line ofcode be<strong>for</strong>e testing, and something doesn’t work, you’ll never be sure where you made yourmistake and then you’ll have to start all over. TRUST ME, this will save you time in the longrun!


11. Now minimize the Media folder and look further down the section and find the file namedGameViewModel.1.csDouble click on this file, and you see the page that we are going to modify. Now look <strong>for</strong> thisfirst block of text and change “Chicken.png” to whatever the file name is of your first answerimage file:Now look <strong>for</strong> this block of text right below it. You’ll see that there is one line per question,and each line contains three pieces of in<strong>for</strong>mation. The first is the file name of thequestion picture, the second if the sound file of the sound you want played when thequestion loads, and the third is the correct answer. The other question choices arerandomly selected from the other questions, and the combinations change each time thegame is played. To add more questions, you just copy one of the lines and paste it rightbelow the block.


12. Now you need to change the privacy statement on line 53. If you have a webpage or blog,you can copy one of the sample statements at http://blog.jerrynixon.com/p/liquid47.html,or you can insert this link: http://freeprivacypolicy.org/generic.php .13. Now you need to change this word in this block to a word representing your subject domain:


14. To allow other people to share in<strong>for</strong>mation from your application, you need to change thetext that gets automatically added when someone chooses to share their high score:15. If you have the time, you can put ads in your application. If you don’t have time, just set theIncludeAdvertising on line 84 to false. If you want to include ads, then you have to registeryour app and create an ad unit <strong>for</strong> it in the Microsoft Advertising Pub Center. When you getapplication ID and the Ad Unit ID, you replace the placeholder codes in the app with yours intwo files in your app. The first place is on line 88 (the application ID) and 89 in theGameViewModel.1.cs file (the one you have been working in).The second place is in the Game.xaml file (just above the GameViewModel.l.cs file) on lines 335and 336.


16. Finally, open up the Package.appmanifest file.You’ll see there are four tabs (pages) in the view of this file. The first tab we’ll work on is theapplication UI tab. Change the Display name from “Farm Animals” to the name of your app.This is the name that will appear on the tile on the Window 8 Start Screen:Look further down the page and make sure your tiles images and Splash Screen all lookcorrect. If not, replace the files in the Media folder with tiles that are correct <strong>for</strong> you app.See <strong>App</strong>endix 3 <strong>for</strong> in<strong>for</strong>mation about how to make your tile images and Splash Screen.17. Now click on the last Tab on the right labeled “Packaging”. You want to change the PackageDisplay Name to something relating to your app, and the Publisher Display Name to thePublisher Name you chose when you started the submission workflow. If you haven’tselected a Publisher name yet, then you can do so now. This is sort of the name of yourbusiness, so be professional and thoughtful.


Exercise 4: Upload your application to theWindows StoreOnce you have completed your application you will want to upload your application to the WindowsStore. In this section, we will assume that you already have a Windows Store account and that you havealready signed into http://dev.windows.com . If you need to create and account, or sign up <strong>for</strong>dreamspark, please see the appendix. We will also not be telling you what everything you will seemeans. We will only be covering the steps you need to take. If you need more in<strong>for</strong>mation you can findit here. http://msdn.microsoft.com/en-us/library/windows/apps/br230835.aspxSince this template has been tested to work with the windows store, all we need to do is to:Create a package to upload to the storeReserve a name <strong>for</strong> our applicationUpload our packageFill out remaining in<strong>for</strong>mation1. In Visual Studio, right click on your solution and select “Store” and then select “Create <strong>App</strong>packages” . Once your package is created you will find a new folder called “<strong>App</strong>Packages” insideyour application folder. Inside the “<strong>App</strong>Packages” folder is a file that ends with “.appxupload”extension. This is the file you specify when you upload your app.


2. Leave Yes checked and Click the Sign in button3. Sign in using the liveID that you used when you created your Microsoft Store account.Click on Reserve Name to reserve the name you want <strong>for</strong> your application.4. A browser window will pop up that will take you to the dashboard section of the dev center andwill ask you to give your application a name (if you are not signed in, it may ask you to do thatagain)Click on <strong>App</strong> Name


5. Add your <strong>App</strong> Name and select Reserve app name. This is the name of the app that will appearin the store, so be a little thoughtful about choosing a name that has some sizzle and denotesusefulness and value (if possible).6. If the name is available, it will tell you, if not find a name that is available. When done clickSave. (AND leave this browser window open)


7. When you go back to Visual Studio the <strong>App</strong> List will start updating.8. When it refreshes, select your app from the list and click on next.9. On the next screen leave everything as it is and click on Create


10. When it is done, it will give you a link to your package.Leave this up; you will need this <strong>for</strong> the next step.11. Now open back up the browser window where you reserved the <strong>App</strong> Name. You will notice that<strong>App</strong> Name is “Complete” but others in the list still need to be done. We will go through theseone by one


12. Click on Selling detailsSelect “Free” from the Price tier dropdownScroll to the bottom and click the United State Checkbox to start. If you “select all” or selectmore than the US, you may fail certification because you don’t have tiles in the languages of thecountries you’ve selected. Once you’ve gotten you app into the store, you can update it byselecting other countries one or two at a time so if you fail testing, you’ll at least know why.Scroll down to Category and select the category that fitsThen just click Save


Drag the .appx file to the Packages Window.When it is done, it will show success. Click on Save17. Next Click on DescriptionFill in all the items with the Red Asterisk This paragraph is the most important text in the submissionprocess, since this is what people will see in the store and decide whether to download your app, so putyour “marketing” hat on and write a brief but convincing description of why someone would really likeyour app. Don’t overstate your claims, but “puffery” is okay in moderation (look it up).Description


Copyright: you can use your real name instead of ChicagoIslandGroup, or you can use the publishername you created <strong>for</strong> the app.Add at least one screenshot.(See <strong>App</strong>endix 5: How to take a screenshot of your app)NOTE: If the Image is too big (2MB or over) it won’t upload (move the screen around until you get onethat is smaller than 2MB. Otherwise you will need to edit it in paint or paint.net to make it smaller.Add the support contact info (The email that users can contact you at). This should be a legitimate e-mail. It might be a good idea to create a new e-mail account just <strong>for</strong> “business-related” e-mails fromyour apps.If you have your own website (most colleges give you website space <strong>for</strong> free with your mail account),you can copy one or more of the privacy statements at: http://blog.jerrynixon.com/p/liquid47.html , oryou can just put this link in there <strong>for</strong> now. Then click on Save.18. Click on Notes to testers.


We have found out that the notes to testers is really important <strong>for</strong> helping get your app certified. Itdoesn’t have to be long, but you need to have a three to six sentences or more explaining how to useyour app and what the expected results should be ie:1. Splash Screen displays logo on colored screen while app loads2. First question flies in from the left and answer choices appear on tabs on the right.3. If the user doesn’t answer within 5 seconds, a message appears asking the user if they want to tryagain or just go on the next answer.4. While the question is displayed a 250x250 display ad should appear in the bottom right corner (ifyou enabled ad support; if you didn’t, then don’t put this statement in)5. If the user chooses the correct answer a message appears showing they have got 1 right. If this isnot the first right answer, then the total number is shown, which will be 1 larger than was shown inthe prior question.6. When all the questions have been answered, the user is given the option of trying again, and/orsharing the result. When the “Share” option is selected, the user is given the option to either sharevia the “People” app, or the “Mail” app.19. That is the last one. Now just click on Submit <strong>for</strong> certification<strong>App</strong>endix


In this section, you fill find stuff that you MAY have to do, including Sign up <strong>for</strong> Dreamspark, Edit imagesand more. I put them in <strong>App</strong>endix in case they were needed. For video walkthroughs of the sign upprocesses, you can refer to this video: (http://aka.ms/stusuvid) that will show you the signup process<strong>for</strong> each of the following Microsoft accounts:Microsoft Account (aka “Live Id”) (46 seconds in)DreamSpark Premium (at 4min 6secs)DreamSpark <strong>for</strong> Students (at 4min 6secs)Windows Store (at 11min 29secs)Windows Phone Store (at 20min 47secs)Microsoft Advertising pubCenter (at 25min 49secs)Windows Azure (at 28min 36secs)You can watch individual sections using the links above, or the entire video. Whatever you need. For afaster process, you can follow the instructions below in <strong>App</strong>endix 1 and 2.<strong>App</strong>endix 1: Sign up <strong>for</strong> DreamsparkIn this step you create a student account by clicking on the “Learn More” arrow in the orange“DreamSpark For Students” box. Then create an account.


Fill out the <strong>for</strong>m. When you click on the “continue to verify” link at the bottom of the <strong>for</strong>m, you will begiven several options.“Get verified through my School” is the preferred way of getting verified, and uses either your .edu e-mail address (or possibly your student ID and password if you school has enabled shibbolethauthentication). You can also use an International Student Identification Card if you have one. If youhave neither of those, you will need to get a verification code from a Microsoft Technical Evangelist(assuming you are attending a workshop). Click the appropriate box, and then follow the instructions. Ifyou choose “Verify through my School” you search <strong>for</strong> your school by typing the name at least partially,and then selecting the best choice from the dropdown. Please be careful and read all the choices. If youchoose incorrectly you will not be able to verify the account you created and you’ll have to create a newone using a verification code. Depending on the type of verification you use, you may get an e-mail witha link you will have to click to finish creating your DreamSpark account.<strong>App</strong>endix 2: Sign up <strong>for</strong> the Windows Store


The Developer Store Account sign up process has two steps. In the first step, you “prove” you are astudent and there<strong>for</strong>e eligible <strong>for</strong> a free student account. The second step is to “prove” you are an adultthat can assume legal and financial responsibility <strong>for</strong> your apps. Let’s start with the student verificationpart.1. First create a DreamSpark account as covered in <strong>App</strong>endix 1 above.2. Get a Windows Store Developer token from the DreamSpark site. To get your token your first signinto your DreamSpark account, then click on the “<strong>App</strong> Development” link at the top of the page:In the Windows 8 pane click on “Learn More”, then scroll down to Step 3 and click on the “GetRegistration Code” link.Look over on the right and click on the link that says “Get code Now”.


A box will appear to the left of the link. Copy this code down somewhere where you will be able toretrieve it. Do a screen shot (Windows Key + prnt screen) or copy paste into an e-mail, etc. This codewill allow you to get a student account <strong>for</strong> free; otherwise you’ll be asked to pay $49 with a credit card.1. Create Your Developer Account <strong>for</strong> the Windows Storea. Go to MSDN.com and click on the word “Windows” a little ways down the page, then click onthe “sign up” button in the “Get your developer account now” pane, then on the “Register Now”link :On the next screen you will be prompted to sign in using your “Microsoft Account”. This is thesame thing as a Windows Live ID. If you have a Windows Live ID already, you can use that, oryou can create one. Even if you already have a Microsoft Account/Windows Live ID <strong>for</strong> anotherpurpose such as Xbox Live, or Hotmail, you may want to create a new one <strong>for</strong> your appdevelopment “business”. Once you’ve signed into MSDN, you’ll be asked to verify that you arean adult using a verification code and a credit card:NOTE!!! VERY CONFUSING NEXT STEP!!!To confirm you are a human and not a bot, the next screen will ask you if you have a code. YOUDON’T HAVE THE CODE THEY ARE ASKING ABOUT YET, YOU HAVE A REGISTRATION CODE THATYOU WILL USE WHEN COMPLETING A FORM LATER ON. Click the “I didn’t receive a code”, and


select the way you want to get it. You have an e-mail or phone text message option. Click the“generate a code” option, then when you get it come back and click “I have a code” and enter it.Once you are past those steps you’ll finish filling out your developer account in<strong>for</strong>mation, andthen go to a check out page, where you’ll be prompted to enter your registration code that yougot from the DreamSpark page here. Click “Update total” and the amount will reset to zero.After clicking the “Next” button your will be asked to enter a credit card to verify that you are anadult. This needs to be a credit card that you have the ability to either view your statement“online” or where you can call to ask <strong>for</strong> in<strong>for</strong>mation on recent activity. After entering the creditcard, a small debit will post as a pending item to your credit card statement. Go online or callthe credit card company and get either the indicated part of the transaction ID, or the amount.You enter the amount in the required field, and then click the button and you are done. You canthen go to your Windows Store Developer Dashboard, and start the submission workflow.<strong>App</strong>endix 3: Using Paint.Net to modify Tileand Store ImagesOnce you have downloaded the images you will need to make them the correct size. As state above, at aminimum you will need the following sizes.a. Logo.png – 150 x 150b. SmallLogo.png – 30 x 30c. StoreLogo.png - 50 x 50d. SplashScreen.png – 620 x 300e. SummaryImage.png – 350 x 350f. Background.jpg (at least 1024 x 768) You should not need to modify this one.


Since making the images will be the same process except <strong>for</strong> the size, I will only show you how to to doone of the images, Logo.png.The image I have selected <strong>for</strong> the items above is Reggie the Redbird.1. The first thing you want to do is to open the image in paint. Right click on the image in the filesystem and select Open With Paint.Net (not Paint).This will open up the image in Paint.Net


2. For the Logo.png, we need it to be 150 x 150 so we select Image Resize from the Menu.When you do this the Resize dialog will pop up.3. You might think you can change this to 150 x 150 and be done… but you cannot. If you do that itwill change the way the image looks, and we don’t want that. What we need to do is to changethe BIGGEST number (either horizontal OR vertical, whichever is bigger) to 150, making sure theMaintain aspect ratio box is checked.Once you have done this, click OK


4. Next click on Image Resize Canvas . This will bring up the Canvas Size dialog box up.5. UNCHECK the Maintain aspect ratio checkbox and make the width and height both 150. Makesure you set the Anchor on the bottom to the center, so it centers your image in the middle ofthe canvas.This will leave you with black lines on either side of your image (or on top and bottom). Thereare a couple of ways to remove them.6. In the tool box, click on the bucket icon and make sure that your color is set to White7. With the bucket selected, click with your mouse on the black portion of the image. This willremove the black line. Do this <strong>for</strong> both sides8. When you are done, go to File Save As and save your image as a png (In this case Logo.png)9. One last thing you may need on some of your images is to have NO background (instead ofwhite)


To do this click on the magic wand icon in the toolbox10. Now click on the white portion of your image (in the case of the image we are using in thistutorial)This will highlight everything White11. Next hit Ctrl-X on your keyboard this will remove the background from around your image.12. You can now save this image as a .png without the background.<strong>App</strong>endix 4: Using Paint to modify tile andstore imagesPaint is a very limited tool but will work <strong>for</strong> our images if needed in a pinch. I still would recommendgetting Paint.Net (Free) http://GetPaint.Net (See Above) <strong>for</strong> your image manipulation because you willhave more freedom and its Free.Once you have downloaded the images you will need to make them the correct size. As state above, at aminimum you will need the following sizes.g. Logo.png – 150 x 150h. SmallLogo.png – 30 x 30i. StoreLogo.png - 50 x 50j. SplashScreen.png – 620 x 300


k. SummaryImage.png – 350 x 350l. Background.jpg (at least 1024 x 768) You should not need to modify this one.Since making the images will be the same process except <strong>for</strong> the size, I will only show you how to to doone of the images, Logo.png.The image I have selected <strong>for</strong> the items above is Reggie the Redbird.1. The first thing you want to do is to open the image in paint. Right click on the image in the filesystem and select Open With Paint.2. As discussed above, you should select an image that is larger than you need it. As you can seewhen I open Reggie.jpg in Paint it is huge… 1821 x 2113 to be exact (as shown on bottom ofimage below)


3. For the Logo.png, we need it to be 150 x 150 so we select the Resize Icon as shown above.When you do this the Resize and Skew dialog will pop up. The first thing we need to do ischange the radial button selected from “Percentage” to “Pixels”4. You might think you can change this to 150 x 150 and be done… but you cannot. If you do that itwill change the way the image looks, and we don’t want that. What we need to do is to changethe BIGGEST number (either horizontal OR vertical, whichever is bigger) to 150, making sure theMaintain aspect ratio box is checked.5. Once you have done this, click OK


6. Once you have done this, you will be almost there. The size we need is 150 x 150 but this is 129x 150 so we need to fix that.7. Click on the select tool and use it to select the whole image8. Once you have done this, click on the copy icon (or hit ctrl-C)9. Once you are sure you copied it, go to File New to create a new image. When it asks you ifyou want to save it select Don’t Save (because you should already have it on the clipboard fromthe last step)10. It will create a blank image the same size as the last one.. we need it 150x 150. So click on theresize icon again, click on Pixels, uncheck “Maintain aspect ratio” and change the size to 150 x


150 then click OK11. Click on the paste icon (the big clipboard) and move your image to the center. When you aredone, it should look something like this.12. Select File Save As PNG File to save your image (This one is called Logo.png)13. Repeat these steps <strong>for</strong> all the images you need.<strong>App</strong>endix 5: How to take a screenshot ofyour appTo take a screenshot of your application, you will need to run the application in the simulator. To dothis, select simulator from the dropdown on the top of Visual Studio.


When done, hit F5 to run your applicationIt will now be running in the simulator. Make sure that it is simulating 1366 x 768Next, click on the camera to take a screenshotTo see where it is saving your screenshots click on the settings icon.


Note the location, you will need this when submitting to store.<strong>App</strong>endix 6: How to resubmit your app tothe store if it failsSince we wont specificlly know “WHY” your app failed certification, in this section we are assuming thatyou already fixed what failed and created a new app package by going to Store Create <strong>App</strong> PackageOnce you have re-created your app package, sign on to your dashboard at http://Dev.Windows.Com(click on dashboard). You will see the app that failed on top. Click on the Edit link.


After looking at what failed, click on Edit ReleaseAll the boxes should still be checked. We just need to edit the Package. So click on PackagesNow we need the new package.Click on the link that Visual Studio Gave you earlier to see the package you created.Drag the .appx file to the Packages Window.


When it is done, it will show success. Click on SaveThe only other thing you MAY want to do is add a note <strong>for</strong> the testers. Either way, when you are doneclick on Submit <strong>for</strong> certification.

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!