Assignment 5 Acura Car Logo Quiz: Please Pick The Correct Na

Assignment 5acurahtmlcar Logo Quizplease Pick The Correct Name For T

Assignment 5/acura.html Car Logo Quiz Please pick the correct name for the logo Assignment 5/buttons.txt buttons Assignment 5/images/acura.jpg Assignment 5/images/background.png Assignment 5/images/buick.jpg Assignment 5/images/cadillac.jpg Assignment 5/images/chevy.jpg Assignment 5/images/chrysler.png Assignment 5/images/honda.jpg Assignment 5/images/hyndai.jpg Assignment 5/images/infinity.jpg Assignment 5/images/jaguar.jpg Assignment 5/images/lexus.jpg Assignment 5/images/lincoln.png Assignment 5/images/mazda.jpg Assignment 5/images/mercedes.jpg Assignment 5/images/mitsubishi.png Assignment 5/images/pontiac.jpg Assignment 5/images/subaru.jpg Assignment 5/images/toyota.jpg Assignment 5/images/volkswagen.jpg Assignment 5/logo.js /var flashcards = [ {question: img src="images/acura.jpg" height="200px" align="center", answers: "Acura"} {question: img src="images/buick.jpg" height="200px" align="center", answers: "Buick"} {question: img src="images/chevy.jpg" height="200px" align="center", answers: "Chevrolet"} {question: img src="images/chrysler.png" height="200px" align="center", answers: "Chrysler"} {question: img src="images/honda.jpg" height="200px" align="center", answers: "Honda"} {question: img src="images/hyndai.jpg" height="200px" align="center", answers: "Hyndai"} {question: img src="images/infinity.jpg" height="200px" align="center", answers: "Infinity"} {question: img src="images/jaguar.jpg" height="200px" align="center", answers: "Jaguar"} {question: img src="images/lexus.jpg" height="200px" align="center", answers: "Lexus"} {question: img src="images/lincoln.png" height="200px" align="center", answers: "Lincoln"} {question: img src="images/mazda.jpg" height="200px" align="center", answers: "Mazda"} {question: img src="images/mercedes.jpg" height="200px" align="center", answers: "Mercedes"} {question: img src="images/mitsubishi.png" height="200px" align="center", answers: "Mitsubishi"} {question: img src="images/pontiac.jpg" height="200px" align="center", answers: "Pontiac"} {question: img src="images/subaru.jpg" height="200px" align="center", answers: "Subara"} {question: img src="images/toyota.jpg" height="200px" align="center", answers: "toyota"} {question: img src="images/volkswagen.jpg" height="200px" align="center", answers: "Volkswagen"} ]/ var flashcards=new Array(); flashcards[0]="images/acura.jpg"; flashcards[1]="images/buick.jpg"; flashcards[2]="images/cadillac.jpg"; flashcards[3]="images/chevy.jpg"; flashcards[4]="images/chrysler.png"; flashcards[5]="images/honda.jpg"; flashcards[6]="images/hyndai.jpg"; flashcards[7]="images/infinity.jpg"; flashcards[8]="images/jaguar.jpg"; flashcards[9]="images/lexus.jpg"; flashcards[10]="images/lincoln.png"; flashcards[11]="images/mazda.jpg"; flashcards[12]="images/mercedes.jpg"; flashcards[13]="images/mitsubishi.png"; flashcards[14]="images/pontiac.jpg"; flashcards[15]="images/subaru.jpg"; flashcards[16]="images/toyota.jpg"; flashcards[17]="images/volkswagen.jpg"; var answers=new Array(); answers[0]= "Acura"; answers[1]= "Buick"; answers[2]= "Cadillac"; answers[3]= "Chevrolet"; answers[4]= "Chrysler"; answers[5]= "Honda"; answers[6]= "Hyndai"; answers[7]= "Infinity"; answers[8]= "Jaguar"; answers[9]= "Lexus"; answers[10]= "Lincoln"; answers[11]= "Mazda"; answers[12]= "Mercedes"; answers[13]= "Mitsubishi"; answers[14]= "Pontiac"; answers[15]= "Subaru"; answers[16]= "Toyota"; answers[17]= "Volkswagen"; / These variables hold indexes to be used for random orderings / / Create a random order for going through the pictures / var counter=0; var index=0; var correctAns=0; var counter = 0; var order = []; /* Randomize indexes for the 4 choices.

To show choices, swap the correct choice with 0, then just use the first 4 / var map = []; / Since correct choice is always 0, randomize the order of buttons / var btnMap = [0, 1, 2, 3]; var positions=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17] //there are 18 images function nextButton() { choose(); document.getElementById("logos").src=flashcards[index]; document.getElementById("1").removeAttribute('disabled'); document.getElementById("2").removeAttribute('disabled'); document.getElementById("3").removeAttribute('disabled'); document.getElementById("4").removeAttribute('disabled'); document.getElementById("correct").removeAttribute('disabled'); document.getElementById("1").style.backgroundColor='transparent'; document.getElementById("2").style.backgroundColor='transparent'; document.getElementById("3").style.backgroundColor='transparent'; document.getElementById("4").style.backgroundColor='transparent'; document.getElementById("correct").style.backgroundColor='transparent'; document.getElementById("nxt").style.backgroundColor='transparent'; document.getElementById("ans").innerHTML=""; counter++; document.getElementById("score").innerHTML="You scored: "+correctAns +" out of "+counter; } function choose(){ shuffle(positions); //shuffle the numbers index=positions[0]; //image number to be displayed map=[answers[positions[0]],answers[positions[1]],answers[positions[2]],answers[positions[3]]]; //choices shuffle(map); //shuffle choices document.getElementById("1").value=map[0]; document.getElementById("2").value=map[1]; document.getElementById("3").value=map[2]; document.getElementById("4").value=map[3]; } /shows correct answer/ function correctButton() { document.getElementById("1").setAttribute('disabled', true); document.getElementById("2").setAttribute('disabled', true); document.getElementById("3").setAttribute('disabled', true); document.getElementById("4").setAttribute('disabled', true); document.getElementById("ans").innerHTML="Correct answer is " + answers[index]; } /shows button clicked / function clicked1(){ document.getElementById("2").setAttribute('disabled', true) document.getElementById("3").setAttribute('disabled', true) document.getElementById("4").setAttribute('disabled', true) if (answers[index]==document.getElementById("1").value) { correctAns++; document.getElementById("correct").setAttribute('disabled', true); document.getElementById("1").style.backgroundColor='#0f0'; } else{ document.getElementById("1").style.backgroundColor='red'; } } function clicked2(){ document.getElementById("1").setAttribute('disabled', true) document.getElementById("3").setAttribute('disabled', true) document.getElementById("4").setAttribute('disabled', true) if (answers[index]==document.getElementById("2").value) { correctAns++; document.getElementById("correct").setAttribute('disabled', true); document.getElementById("2").style.backgroundColor='#0f0'; } else{ document.getElementById("2").style.backgroundColor='#f00'; } } function clicked3(){ document.getElementById("2").setAttribute('disabled', true) document.getElementById("1").setAttribute('disabled', true) document.getElementById("4").setAttribute('disabled', true) if (answers[index]==document.getElementById("3").value) { correctAns++; document.getElementById("correct").setAttribute('disabled', true); document.getElementById("3").style.backgroundColor='#0f0'; } else{ document.getElementById("3").style.backgroundColor='#f00'; } } function clicked4(){ document.getElementById("2").setAttribute('disabled', true) document.getElementById("3").setAttribute('disabled', true) document.getElementById("1").setAttribute('disabled', true) if (answers[index]==document.getElementById("4").value) { correctAns++; document.getElementById("correct").setAttribute('disabled', true); document.getElementById("4").style.backgroundColor='#0f0'; } else{ document.getElementById("4").style.backgroundColor='#f00'; } } / Shuffle an array / function shuffle(flashcards) { for (i = 0; i flashcards.length); var temp = flashcards[i]; flashcards[i] = flashcards[j]; flashcards[j] = temp; } } Assignment 5/style.css @charset "utf-8"; / CSS Document / body { margin: 0px 200px 0px 200px; background-image:url(images/background.png);} #main {padding: 0px 150px; } h1{ font-weight:bold ; font-size:3.0em; color:#420001; text-align:center; } h2 {margin: 0px; font-weight:normal; font-size:1.80em; text-align:center; color:#420001} #logos{ height:10.5em; width:auto; padding:0px; margin:0px; } p{ color:#F99FA1; margin:0px; padding-top:10px; } To Download xampp: ------------------ download xampp.

Start xampp and start Apache and MySql on the Xampp dashboard as u see on the video. . Download heidisql ------------------- for IDE. You can use Toad or SQL Workbench instead. go to commandprompt c:/xampp/mysql (or wherever you have xampp installed) run from command prompt to set the password for the root whatever you want to set. mysqladmin.exe -u root password Start heidisql and fill in the password and say open. This opens the database. Now create your own database or use an existing one.

Once you have your database set up and table insrted and populated: Copy all your css, js, php and html files into c:\xampp\htdocs\ You can do to bring up xampp. Now you can do the to test php. to test the database. (Make sure you change the userid and passwd if needed. ). Now test other phps too before you start making changes for your assignment. CREATE DATABASE FLASHCARDS; SHOW DATABASES; USE FLASHCARDS; CREATE TABLE Cars( id INT NOT NULL AUTO_INCREMENT, name VARCHAR(31) NOT NULL, model VARCHAR(31) NOT NULL, url VARCHAR(255), PRIMARY KEY (id) ); describe table Cars; LOAD DATA LOCAL INFILE 'cars.csv' INTO TABLE Cars FIELDS TERMINATED BY ','; SELECT from Cars; SELECT name from Cars; --TRUNCATE TABLE Cars; -- Deletes all content (try again) -- DROP TABLE cars; -- CREATE USER ''@ 'localhost' IDENTIFIED BY ''; CREATE USER 'flashuser'@ 'localhost' IDENTIFIED BY 'MyDogHasFleas'; GRANT ON

TO ''@'localhost'; GRANT select, insert ON FlashCards. TO 'flashuser'@'localhost'; GRANT all ON FlashCards.* TO 'flashuser'@'localhost'; connect_error) { die("Connection failed: " . $conn->connect_error); } echo "Connected successfully"; ?> Data in the Cars table $dbase"); $mydb = new mysqli('localhost', $user, $pword, $dbase); if ($mydb->connect_error) { die( "Failed to connect to MySQL: " . $mydb->connect_error); } print (" "); print (" name url "); $query = "SELECT name, url FROM Cars;"; if ($result = $mydb->query($query)) { while ($row = $result->fetch_assoc()) { // Output the results as an html table print (" "); foreach ( $row as $key => $value ) { print (" $key : $value "); } print (""); } } $mydb->close(); ?> $table\n"); print (" \n"); $mydb = new mysqli('localhost', $user, $pword, $dbase); if ($mydb->connect_error) { die( "Failed to connect to MySQL: " . $mydb->connect_error); } $query = "SELECT name, url FROM $table ORDER BY rand() LIMIT 4;"; $result = $mydb->query($query); $mydb->close(); $row = $result->fetch_assoc(); print (" \n"); $correct_name = $row["name"]; print (" \n"); print (" \n"); print (" \n"); print (" \n"); while ($row = $result->fetch_assoc()) { print (" \n"); } print ("\n"); ?> 0 / 0 · In this assignment, you are to create essentially the same website as you did in JavaScript, only this time you are to use PHP to generate the page content.

You just have to populate a MySQL database with your data, and add your PHP code. You should find it reachable from a browser on your host machine (or any other machine on your local network). To get you though the initial details and save you a lot of the work, I am giving you a PHP file that already does much of the work. You have to make it work with your data, maybe improve the appearance, and add the code needed to keep score. (That part is enough of a challenge as it is, so the rest is pretty much given.) If you are adept at PHP you may change anything you wish. I have recorded the classroom presentations on everything you need for this assignment setting up the MySQL database using XAMPP, and running the PHP code.

You will find these videos on my website. Here is the assignment and the initial PHP code. Use the test.php to test the ability to run PHP from your browser ( vm's ip address]/[your subdirectory of html]/test.php) Use the dbtest.php to test the ability to connect php to mysql. FIrst edit it to have your account into. Use the showtables2.php to test access to your data.

Edit the file with your account table info. Then request it from a web browser on the host machine. It should produce a table with your data. Make the same edits in the cargame.php file and perhaps rename it. Then request it from your brower.

Paper For Above instruction

The task requires creating a web-based car logo quiz similar to a previous JavaScript implementation, but utilizing PHP and MySQL for dynamic content generation and score management. The core objective is to develop a quiz interface that displays car logos, prompts users to identify the manufacturer, and keeps track of correct responses, all managed through server-side scripting and database interactions.

To achieve this, the process involves several steps: setting up the database, populating it with relevant car logo data, and scripting PHP pages to interact with this data. The database schema should include a table, such as 'Cars', with fields for car name, model, and logo image URL. Data insertion can be facilitated through SQL commands or CSV import. The PHP scripts will connect to this database, fetch four random logo images, and display them alongside answer options, with the correct answer strategically placed among other choices.

The principal PHP file, perhaps named 'cargame.php', must incorporate code to establish a database connection using mysqli, select four random records, and render the quiz interface with answer buttons. The quiz must include functionality for users to select an answer, receive immediate feedback, and see their score update dynamically. To replicate the JavaScript functionality, PHP can generate the HTML content each time the page loads, with JavaScript or PHP handling answer validation and score updating without excessive server load.

Furthermore, planning for a user-friendly interface is essential. This includes properly styling the pages using CSS, ensuring logos are clearly displayed, and that feedback is visually accessible. The implementation can also incorporate JavaScript to enhance user interaction, such as disabling answer buttons after a selection and highlighting correct or incorrect choices, although core functionality primarily depends on PHP for data management and page generation.

Additionally, instructions include testing the local server environment using XAMPP, configuring MySQL, and using clients like HeidiSQL or Toad for database management. It's vital to ensure PHP scripts are correctly connecting to MySQL, retrieving data, and that the quiz operates seamlessly within the local network environment. Testing PHP scripts with sample queries

Related Assignments