{"id":2288,"date":"2024-08-25T07:42:43","date_gmt":"2024-08-25T07:42:43","guid":{"rendered":"https:\/\/www.shawnmeanders.com\/blog\/?p=2288"},"modified":"2024-08-25T07:42:43","modified_gmt":"2024-08-25T07:42:43","slug":"chinese-study-app-introduction","status":"publish","type":"post","link":"https:\/\/www.shawnmeanders.com\/blog\/2024\/08\/25\/chinese-study-app-introduction\/","title":{"rendered":"Chinese Study App &#8211; Introduction"},"content":{"rendered":"\r\n<p class=\"wp-block-paragraph\">\r\n<i>This was written August 22, 2024 as part of the<a href=\"https:\/\/www.shawnmeanders.com\/blog\/chinese-study-app-programming-project\/\">Chinese Study App \u2013 Programming Project<\/a><\/i>.\r\n<\/p>\r\n\r\n<h2>Introduction<\/h2>\r\n<p>\r\nHere&#8217;s my all new project, which I&#8217;m hopeful will not only be useful for myself and some of my classmates, but also to demonstrate how I approach programming projects, thus helping people learn how to tackle such tasks themselves. \r\n<\/p>\r\n\r\n<h2>Inspiration<\/h2>\r\n<p>\r\nI have been thinking about this specific project for a few weeks now. It started with a new exam introduced this semester: a timed oral presentation recorded on a computer. We were given some grammar patterns to use, as well as a topic to discuss. And while I was not a fan of this exam (in part due to the stress, stringent time-constraint and the fact this was happening in a room full of people simultaneously speaking aloud), I must admit that the more I thought about it, the more I was convinced it could be a great learning tool. Thus were cemented the foundations for this project. Moreover, I have since started a daily habit of writing in Chinese, and have been struggling with using\/remembering more advanced vocabulary and grammar patterns, and thus realized such a tool could also supplement my writing.\r\n<\/p>\r\n\r\n<h2>Ideation and Planning<\/h2>\r\n<p>\r\nI have had this project in the back of my mind and have been having ideating for a while. But it was time to finally write down my thoughts and initial design for the project. Here it is in image form, with my terrible handwriting.\r\n<figure id=\"attachment_2290\" aria-describedby=\"caption-attachment-2290\" style=\"width: 660px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-768x1024.jpg\" alt=\"\" width=\"660\" height=\"880\" class=\"size-large wp-image-2290\" srcset=\"https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-768x1024.jpg 768w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-225x300.jpg 225w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-1152x1536.jpg 1152w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-1536x2048.jpg 1536w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-250x333.jpg 250w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-550x733.jpg 550w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-800x1067.jpg 800w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-135x180.jpg 135w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1-375x500.jpg 375w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_1.jpg 1860w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><figcaption id=\"caption-attachment-2290\" class=\"wp-caption-text\">Chinese Study App &#8211; Breakdown of Project<\/figcaption><\/figure>\r\n\r\n<figure id=\"attachment_2291\" aria-describedby=\"caption-attachment-2291\" style=\"width: 660px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-768x1024.jpg\" alt=\"\" width=\"660\" height=\"880\" class=\"size-large wp-image-2291\" srcset=\"https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-768x1024.jpg 768w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-225x300.jpg 225w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-1152x1536.jpg 1152w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-1536x2048.jpg 1536w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-250x333.jpg 250w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-550x733.jpg 550w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-800x1067.jpg 800w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-135x180.jpg 135w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-375x500.jpg 375w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2.jpg 1860w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><figcaption id=\"caption-attachment-2291\" class=\"wp-caption-text\">Chinese Study App &#8211; Initial Prototype Design<\/figcaption><\/figure>\r\n<\/p>\r\n<p>\r\nA few notes on how I decided to write this:\r\n<ul>\r\n  <li>I first wrote broad goals for what I want to be able to accomplish with it.<\/li>\r\n  <li>I defined the functionality I want for my program into different chunks.<\/li>\r\n  <li>I linked the chunks of functionality to related goals.<\/li>\r\n  <li>I defined the priority\/importance of each functionality. There is only one I consider critical, (allowing the app to be &#8220;useful&#8221; and somewhat useable). There&#8217;s an additional one I consider necessary for the application to accessible. The rest I categorized as &#8220;Stretch goals\/nice to have&#8221;, and will be disregarded for now.<\/li>\r\n  <li>I listed the basic tools\/technology I want to use.<\/li>\r\n  <li>I sketched the design for my first prototype.<\/li>\r\n<\/ul>\r\n<\/p>\r\n\r\n<h2>Goals<\/h2>\r\n<p>\r\n<ul>\r\n  <li>Practice speaking Chinese using randomly vocabulary and grammar patterns randomly selected from a list, and discussing a topic randomly selected from a list, within a specified time frame.<\/li>\r\n  <li>Practice writing Chinese using vocabulary and grammar patterns randomly selected from a list.<\/li>\r\n  <li>Learn and practice web development.<\/li>\r\n<\/ul>\r\n<\/p>\r\n\r\n<h2>Functionality<\/h2>\r\n<p>\r\n<ul>\r\n  <li>[Critical] Input lists of elements (e.g.: grammar, vocabulary, topics) and randomly select a set number from each list.<\/li>\r\n  <li>[Important\/Useful] Ability to export and import lists (or to save them).<\/li>\r\n  <li>[Stetch Goals\/Nice to Have]Timers<\/li>\r\n  <li>[Stetch Goals\/Nice to Have]Record Speech<\/li>\r\n  <li>[Stetch Goals\/Nice to Have]Write and save text (Ability to write a composition using the randomly selected elements)<\/li>\r\n  <li>[Stetch Goals\/Nice to Have]Customization of interface<\/li>\r\n  <li>[Stetch Goals\/Nice to Have]Add definitions\/examples to vocabulary\/grammar<\/li>\r\n<\/ul>\r\n<\/p>\r\n\r\n<h2>Tools<\/h2>\r\n<p>For portability and versatility, I opted to make it a web tool for now (which can in theory be used by both a computer and mobile device). Since it&#8217;s a learning opportunity, I opted to limit myself to HTML, CSS and &#8220;vanilla&#8221; Javascript for now. (If any of this intimidates you for now, you can disregard it entirely. For beginners, I don&#8217;t think knowing how to choose tools\/technology is the most important.)<\/p>\r\n\r\n<h2>Design<\/h2>\r\n<p>\r\nHere&#8217;s once again an image of the design:\r\n<figure id=\"attachment_2291\" aria-describedby=\"caption-attachment-2291\" style=\"width: 660px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-768x1024.jpg\" alt=\"\" width=\"660\" height=\"880\" class=\"size-large wp-image-2291\" srcset=\"https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-768x1024.jpg 768w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-225x300.jpg 225w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-1152x1536.jpg 1152w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-1536x2048.jpg 1536w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-250x333.jpg 250w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-550x733.jpg 550w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-800x1067.jpg 800w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-135x180.jpg 135w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2-375x500.jpg 375w, https:\/\/www.shawnmeanders.com\/blog\/wp-content\/uploads\/2024\/08\/Chinese-Study-App_2.jpg 1860w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><figcaption id=\"caption-attachment-2291\" class=\"wp-caption-text\">Chinese Study App &#8211; Initial Prototype Design<\/figcaption><\/figure>\r\n<\/p>\r\n\r\n<p>\r\nThis design is very basic, and highlights specific functionality. The design would be broken into two pages: An editing\/preparation page, where you prepare your categories and their elements, and a &#8220;practice&#8221; page, where you would be shown the selected elements from each category and would practice either speaking or writing.\r\n<\/p>\r\n\r\n<p>\r\nFor the editing\/preparation page, each category:\r\n<ul>\r\n  <li>Has a name that can be edited.<\/li>\r\n  <li>Has an input for a list of elements to be added.<\/li>\r\n  <li>Has an integer value that can be added to represent the number of elements to be selected.<\/li>\r\n  <li>Can be deleted.<\/li>\r\n<\/ul>\r\n<\/p>\r\n<p>\r\nThere would also be an option to add another category, along with a &#8220;submit&#8221; button to choose the random items from each category and bring you to the &#8220;practice&#8221; page.\r\n<\/p>\r\n\r\n<p>\r\nMeanwhile, the &#8220;practice&#8221; page would display each category, along with the randomly selected elements. None of this should be editable. Finally, there would be a &#8220;return&#8221; button, for when the user is done, to return to the editing\/preparation page.\r\n<\/p>\r\n\r\n<h2>Conclusion<\/h2>\r\n<p>\r\nAbove I presented my first ideas for the tool I want to build to help learn Chinese (Which really could be used for any language). I&#8217;ve also presented my initial approach to breaking it down, limiting the scope and initial design. Hopefully this can be helpful. If there&#8217;s anything that&#8217;s unclear, or you have outstanding questions, feel free to comment below. Take care everyone, and I wish you success in your own projects!\r\n<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>This was written August 22, 2024 as part of theChinese Study App \u2013 Programming Project. Introduction Here&#8217;s my all new project, which I&#8217;m hopeful will not only be useful for myself and some of my classmates, but also to demonstrate how I approach programming projects, thus helping people learn how to tackle such tasks themselves. &hellip; <a href=\"https:\/\/www.shawnmeanders.com\/blog\/2024\/08\/25\/chinese-study-app-introduction\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Chinese Study App &#8211; Introduction<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[11],"tags":[],"class_list":["post-2288","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/posts\/2288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/comments?post=2288"}],"version-history":[{"count":10,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/posts\/2288\/revisions"}],"predecessor-version":[{"id":2324,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/posts\/2288\/revisions\/2324"}],"wp:attachment":[{"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/media?parent=2288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/categories?post=2288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shawnmeanders.com\/blog\/wp-json\/wp\/v2\/tags?post=2288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}