{"id":2126,"date":"2017-08-10T14:22:35","date_gmt":"2017-08-10T14:22:35","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=2126"},"modified":"2017-11-20T22:46:41","modified_gmt":"2017-11-20T22:46:41","slug":"graphical-dice","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/graphical-dice\/","title":{"rendered":"Graphical Dice"},"content":{"rendered":"<p>To create a graphical dice, first of all, you need to create six images that resemble six sides of a dice. Save the images as 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg and 6.jpg. To randomly load the images, you need to use the img\u00a0and src attributes and the random method of the Math object.<\/p>\n<p>We use the following syntax to generate random integers from 1 to 6.<\/p>\n<p>Math.floor( 1 + Math.random() * 6 )<\/p>\n<p>Note that the Math.random() method generates\u00a0a random number from 0 to a number less than but not equal to 6. Therefore, 1+Math.random()*6 generate a number from 1 to less than but not equal to 7. Therefore, Math.floor( 1 + Math.random() * 6 ) genrates integer from 1 to 6.<\/p>\n<p>The script to load the six images randomly is<\/p>\n<pre>&lt;script language=\"javascript\"&gt;\r\nfunction rolldice()\r\n{ document.write ( \"&lt;img src = \\\"\" +\r\nMath.floor( 1 + Math.random() * 6 ) +\r\n\".jpg\\\" width = \\\"50\\\" height = \\\"50\\\" \/&gt;\");\r\n\r\ndocument.writeln(\"&lt;br&gt;&lt;hr&gt;Click on the refresh button to reload the page\"); }\r\n&lt;\/script&gt;\r\n&lt;input type=\"button\" value=\"Roll Dice\" onclick=\"rolldice()\"&gt;\r\n<\/pre>\n<p>View the <a href=\"http:\/\/javascript-tutor.net\/java_tutor\/dice1.htm\">Graphical Dice<\/a> here.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To create a graphical dice, first of all, you need to create six images that resemble six sides of a dice. Save the images as 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg and 6.jpg. To randomly load the images, you need to use the img\u00a0and src attributes and the random method of the Math object. We use &hellip; <a href=\"https:\/\/javascript-tutor.net\/index.php\/graphical-dice\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Graphical Dice&#8221;<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2126","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Graphical Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Graphical Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"To create a graphical dice, first of all, you need to create six images that resemble six sides of a dice. Save the images as 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg and 6.jpg. To randomly load the images, you need to use the img\u00a0and src attributes and the random method of the Math object. We use &hellip; Continue reading &quot;Graphical Dice&quot;\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2017-11-20T22:46:41+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/graphical-dice\/\",\"url\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html\",\"name\":\"Graphical Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2017-08-10T14:22:35+00:00\",\"dateModified\":\"2017-11-20T22:46:41+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Graphical Dice\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Graphical Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html","og_locale":"en_US","og_type":"article","og_title":"Graphical Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"To create a graphical dice, first of all, you need to create six images that resemble six sides of a dice. Save the images as 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg and 6.jpg. To randomly load the images, you need to use the img\u00a0and src attributes and the random method of the Math object. We use &hellip; Continue reading \"Graphical Dice\"","og_url":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2017-11-20T22:46:41+00:00","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/graphical-dice\/","url":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html","name":"Graphical Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2017-08-10T14:22:35+00:00","dateModified":"2017-11-20T22:46:41+00:00","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"Graphical Dice"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2126","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=2126"}],"version-history":[{"count":6,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2126\/revisions"}],"predecessor-version":[{"id":2132,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2126\/revisions\/2132"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=2126"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}