{"id":11513,"date":"2015-01-13T05:03:57","date_gmt":"2015-01-12T18:03:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11513"},"modified":"2015-01-13T05:03:57","modified_gmt":"2015-01-12T18:03:57","slug":"phpcss-sentence-auxiliary-verb-game-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/phpcss-sentence-auxiliary-verb-game-tutorial\/","title":{"rendered":"PHP\/CSS Sentence Auxiliary Verb Game Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliary_verb_again.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"PHP\/CSS Sentence Auxiliary Verb Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliary_verb_again.jpg\" title=\"PHP\/CSS Sentence Auxiliary Verb Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">PHP\/CSS Sentence Auxiliary Verb Game Tutorial<\/p><\/div>\n<p>The easiest English games to design are those that involve discrete words, because then dictionaries and thesauruses can be used.   Learning English (for students whose first language is not English (ESL)) is obviously more useful when the student can piece together sentences, so, here, with today&#8217;s tutorial, we piece together sentences where <a target=_blank title='Auxiliary verb link ... thanks' href='http:\/\/www.chompchomp.com\/terms\/auxiliaryverb.htm'>auxiliary verbs<\/a> come into play in the makeup of the complete English sentence.  Today&#8217;s game asks you to fill in the game&#8217;s missing start, middle word, or end to your sentences, in order to complete those sentences (correctly, hopefully?!), and we&#8217;ll call the game <i>&#8220;The Auxiliary Verb Game&#8221;<\/i> (too snappy for you?!) &#8230; and you score points for each correct sentence you form (we may not have thought of all sentences you may construct, and if this happens avail yourself of the <a target=_blank title='Complaints Department' href='http:\/\/www.rjmprogramming.com.au\/Contact_Us.html'>Complaints Department<\/a>).  It uses English sentences.<\/p>\n<p>Today&#8217;s data source inspiration is from <i>A Shorter Guide to English Usage<\/i>  by M.A. Ramsay (p.34) and from <a target=_blank href='http:\/\/www.brainyquote.com\/quotes\/authors\/s\/soren_kierkegaard.html' title='S\u00f8ren Kierkegaard Quotes'>S\u00f8ren Kierkegaard Quotes<\/a> &#8230; thanks a lot.<\/p>\n<p>This <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliary_verb_again.php\" title=\"Conjunction Sentence Game\">game<\/a> mainly utilizes PHP and CSS to create the functionality in a similar way to  <a target=_blank href='#hjsavgt' title='HTML\/Javascript Sentence Auxiliary Verb Game Tutorial'>HTML\/Javascript Sentence Auxiliary Verb Game Tutorial<\/a> as shown below, which primarily used HTML and Javascript functionality.<\/p>\n<p>And which is better?   Got to say the PHP and CSS make for simpler code and today we use the CSS syntax &#8230;<\/p>\n<ul>\n<li>#[elementID]:before { <a target=_blank title='CSS content information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/sel_before.asp'>content: [prefixContent];<\/a> } and <\/li>\n<li>#[elementID]:after { <a target=_blank title='CSS content information from w3schools' href='http:\/\/www.w3schools.com\/cssref\/pr_gen_content.asp'>content: [suffixContent];<\/a> }  to insert the equivalent of Javascript DOM document.getElementById([elementID]).<a target=_blank title='Javascript DIM innerHTML property information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/prop_html_innerhtml.asp'>innerHTML<\/a> into these elements, consequently making the HTML a lot simpler &#8230; so that the <i>select<\/i> element can be slotted into the HTML without worrying about whether it sits to the left, center, or right &#8230; the CSS <i>&#8220;intelligence&#8221;<\/i> takes care of that<\/li>\n<\/ul>\n<p>Generally speaking, with some CSS3 <a target=_blank title='animation ideas' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=%22CSS3%22+%22animation%22'>animation<\/a> and <a target=_blank title='transformation ideas' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=%22CSS3%22+%22transformation%22'>transformation<\/a> and <a target=_blank title='rotation ideas' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?s=%22CSS3%22+%22rotation%22'>rotation<\/a> exceptions, tend to think that <i>&#8220;intelligence&#8221;<\/i> belongs more in your Javascript, as far as client functionality goes, but the two usages above, also used during our <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11421' title='WordPress Bullet Point CSS Styling Primer Tutorial'>WordPress Bullet Point CSS Styling Primer Tutorial<\/a> blog posting, does feel like added <i>&#8220;intelligence&#8221;<\/i> to your HTML webpages, which are written out by PHP in our case, because you need the server-side PHP to decide what that :before and :after [prefixContent] and [suffixContent] respectively, should be.<\/p>\n<p>Hopefully you can figure the rules when you click the picture above for a <a target=_blank title=\"live run\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliary_verb_again.php\">live run<\/a>.<\/p>\n<p>Anyway, see how you go with this ESL sentence game that makes use of a (HTML canvas element) chalkboard!<\/p>\n<p>Here is a link to some downloadable PHP (mainly with CSS) programming code you could rename to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliary_verb_again.php-GETME\" title=\"auxiliary_verb_again.php\">auxiliary_verb_again.php<\/a> (please note that View-&gt;Page Source will show you how simple the HTML becomes compared to the code of tutorial below).<\/p>\n<p>There are bits of similarity and perhaps it would be instructive for you to see the similarities and differences between the PHP and the HTML (of the tutorial below) here with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliary_verb_again.php-GETME\" title=\"auxiliary_verb_again.php\">auxiliary_verb_again.php<\/a><\/p>\n<p>Some utf-8 coding considerations came into play with the code above, and in this respect, take a look at:<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.fileformat.info\/info\/charset\/UTF-8\/list.htm' title='Complete Character List for UTF-8'>Complete Character List for UTF-8<\/a> (is a good resource to know about)<\/li>\n<li>Have a look at meta tag in header that looks like &#8230; <code>&lt;meta charset=\"UTF-8\"&gt;<\/code><\/li>\n<li>Have a look at code line &#8230; <code>  context.strokeText(pseudo_sentence.replace(\"&amp;#248;\", \"\u00f8\"),30,30); <\/code><\/li>\n<\/ul>\n<p>Stay tuned over the next couple of days for an interesting blog posting tomorrow called  <a style='display:none;' target=_blank title='Yahoo YQL Web Service JSON Thesaurus Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11246'>Yahoo YQL Web Service JSON Thesaurus Tutorial<\/a>Yahoo YQL Web Service JSON Thesaurus Tutorial which introduces new thesaurus functionality, and then the day after we&#8217;ll use thesauruses along with the <i>&#8220;smarts&#8221;<\/i> of today&#8217;s <a target=_blank title='PHP\/CSS Sentence Auxiliary Verb Game Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11513'>PHP\/CSS Sentence Auxiliary Verb Game Tutorial<\/a> to create a blog posting which invents an English Word Association Game.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Again we use PHP and we hope this is not frustrating those readers who have no PHP installed?  It is easy to install PHP web server language (and Apache web server with MySql database) locally for Windows or Mac and would recommend, respectively,   <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=1078' title='EasyPHP Windows Framework for PHP\/MySql Tutorial'>EasyPHP Windows Framework for PHP\/MySql Tutorial<\/a> and <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=532' title='MAMP Mac Framework for PHP\/MySql Tutorial'>MAMP Mac Framework for PHP\/MySql Tutorial<\/a> for (install) advice here.<\/p>\n<hr \/>\n<p id='hjsavgt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9128' title='HTML\/Javascript Sentence Auxiliary Verb Game Tutorial'>HTML\/Javascript Sentence Auxiliary Verb Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliaryverb_chalkboard.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML\/Javascript Sentence Auxiliary Verb Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/AuxiliaryVerb_Sentence.jpg\" title=\"HTML\/Javascript Sentence Auxiliary Verb Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML\/Javascript Sentence Auxiliary Verb Game Tutorial<\/p><\/div>\n<p>The easiest English games to design are those that involve discrete words, because then dictionaries and thesauruses can be used.   Learning English (for students whose first language is not English (ESL)) is obviously more useful when the student can piece together sentences, so, here, with today&#8217;s tutorial, we piece together sentences where <a target=_blank title='Auxiliary verb link ... thanks' href='http:\/\/www.chompchomp.com\/terms\/auxiliaryverb.htm'>auxiliary verbs<\/a> come into play in the makeup of the complete English sentence.  Today&#8217;s game asks you to fill in the game&#8217;s missing start, middle word, or end to your sentences, in order to complete those sentences (correctly, hopefully?!), and we&#8217;ll call the game <i>&#8220;The Auxiliary Verb DotDotDot Game&#8221;<\/i> (too snappy for you?!) &#8230; and you score points for each correct sentence you form (we may not have thought of all sentences you may construct, and if this happens avail yourself of the <a target=_blank title='Complaints Department' href='http:\/\/www.rjmprogramming.com.au\/Contact_Us.html'>Complaints Department<\/a>).  It uses English sentences, and we invite you to play with another player, and add your own, maybe while they aren&#8217;t looking?!  (Hint: Try the middle Dot).<\/p>\n<p>Today&#8217;s data source inspiration is from <i>A Shorter Guide to English Usage<\/i>  by M.A. Ramsay (p.34) and from <a target=_blank href='http:\/\/www.brainyquote.com\/quotes\/authors\/s\/soren_kierkegaard.html' title='S\u00f8ren Kierkegaard Quotes'>S\u00f8ren Kierkegaard Quotes<\/a> &#8230; thanks a lot.<\/p>\n<p>This <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliaryverb_chalkboard.html\" title=\"Conjunction Sentence Game\">game<\/a> uses HTML and Javascript programming languages.<\/p>\n<p>Hopefully you can figure the rules when you click the picture above for a <a target=_blank title=\"live run\" href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliaryverb_chalkboard.html\">live run<\/a>.<\/p>\n<p>Anyway, see how you go with this ESL sentence game that makes use of a (HTML canvas element) chalkboard!<\/p>\n<p>Here is a link to some downloadable HTML (with Javascript) programming code you could rename to <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Canvas\/Game\/Chalkboard\/auxiliaryverb_chalkboard.html_GETME\" title=\"auxiliaryverb_chalkboard.html\">auxiliaryverb_chalkboard.html<\/a> (please note that some of the utf-8 characters may be better seen with View-&gt;Page Source).<\/p>\n<p>Some utf-8 coding considerations came into play with the code above, and in this respect, take a look at:<\/p>\n<ul>\n<li><a target=_blank href='http:\/\/www.fileformat.info\/info\/charset\/UTF-8\/list.htm' title='Complete Character List for UTF-8'>Complete Character List for UTF-8<\/a> (is a good resource to know about)<\/li>\n<li>Have a look at meta tag in header that looks like &#8230; <code>&lt;meta charset=\"UTF-8\"&gt;<\/code><\/li>\n<li>Have a look at code line &#8230; <code>  context.strokeText(pseudo_sentence.replace(\"&amp;#248;\", \"\u00f8\"),gpx,gpy); <\/code><br \/>and <code>  context.strokeText(real_sentence.replace(\"&amp;#248;\", \"\u00f8\"),gpx,gpy); <\/code><\/li>\n<\/ul>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#9128' onclick='var dv=document.getElementById(\"d9128\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=ESL\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d9128' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#11513' onclick='var dv=document.getElementById(\"d11513\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11513' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The easiest English games to design are those that involve discrete words, because then dictionaries and thesauruses can be used. Learning English (for students whose first language is not English (ESL)) is obviously more useful when the student can piece &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/phpcss-sentence-auxiliary-verb-game-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,13,15,37],"tags":[85,184,281,282,326,327,372,396,476,576,714,744,827,932,997,1269,1319],"class_list":["post-11513","post","type-post","status-publish","format-standard","hentry","category-elearning","category-esl","category-games","category-tutorials","tag-apache","tag-canvas","tag-css","tag-css3","tag-dictionary","tag-did-you-know","tag-easyphp","tag-esl","tag-game","tag-html","tag-local-web-server","tag-mamp","tag-mysql","tag-php","tag-programming","tag-thesaurus","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11513"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=11513"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11513\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=11513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=11513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=11513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}