kicken

If you wrap all your update card elements in a container, and have them all be siblings, then you can get the effect you want using :first-child and :last-child <div class="blw"> <div class="update_grade">Class of 2023</div> <div class="update-list"> <div class="update_card"> ... Jalen Hooks ... </div> <div class="update_card"> ... Logan Imes ... </div> <div class="update_card"> ... Spencer White ... </div> </div> </div> .update_card:first-child { border-radius: 10px 10px 0px 0px; } .update_card:last-child { border-radius: 0px 0px 10px 10px; }

An image of code isn't code. We can't copy and paste an image into our editor and experiment to help solve the issue. It seems your HTML is not structured correctly for the nth/first/last pseudo selectors though. Those selectors only count elements that are on the same level. I can't tell for sure since your image is incomplete, but it looks like your update_card elements are wrapped by some other elements, meaning they are an only-child and thus both the first and last element. If you can't make your update_card elements siblings of each other, then you may need to create a class that you apply to the first and last elements manually.

You really need to post the accompanying HTML when asking CSS questions, since the HTML layout can affect the CSS.

Add two counter variables to the code, one for total questions answered and one for total correct. In the click handler for the answers, increment the total questions variable, and if the answer was correct, increment the total correct variable. Update some elements on the page with the new values. In the existing code, if you move these lines outside of the if condition, then it'll show a blank screen when hitting next question at the end. quiz.classList.remove('answered'); activeQuestion.classList.remove('active'); If you want to do more than just a blank screen, then add additional code as an else branch on the conditional. If you wanted to have a "Finished" screen for example, you could and another class on the quiz, quiz.classList.add('finished'). Update the CSS to show some another div with your quiz finished content when that class has been applied.

Neither of those is a valid email address. Your attempt at $to has extra '..' surrounding the email. Your attempt at $from has no local part (before the @). I would highly suggest using a library to handle your emails instead of trying to use mail() directly. Symfony/mailer is my choice.

That is going to be looking for some element with id="1", since step is equal to 1 according to you. Since it's not finding one (the cause of your null error), you must not have any such element in your HTML. You need to make sure you are searching for the correct ID value, or reference the element some other way.

You have an extra brace in your code near the insert method, part that was not visible in your original image. Your crazy indentation is not helping to spot such errors, you need to work on formatting better. If your editor is causing the crazy formatting, that's usually a good sign your braces or quotes don't match up properly. There are some other small errors, maybe once you fix the brace issue they will be easier for you to spot. Again, you need to stop using that PHP 8 only feature as well if you're not going to upgrade.

Linux requires root for access to ports below 1024.

You can't use a PHP 8 feature while running PHP 7.2. Either adjust your code to be compatible with PHP 7.2, or upgrade your server to PHP 8. Upgrading would be better, since support for PHP 7.2 ran out 2 years ago.

You can't always just blindly trust errors in editors. The editor might not know about newer syntax structures, or might be linting against a specific version of PHP. The constructor promotion feature you are using is new to PHP 8, so if your editor is linting against PHP 7 it'll correctly see that as an error. Do you get an error when actually trying to run the code? If so, what is that error? Are you using PHP 8 or PHP 7 to run the code?

You can generate whatever HTML you want and swap it out using the JS code. The HTML structure in my example is how I'd probably code it, but nothing about it is required. You'd need to adjust the JS to match up with whatever your final HTML is with regards to the classes/IDs etc. There are a variety of ways to handle the next question bit. You could include a link to the next question when loading the current question. You could load a list of question IDs when the page first loads and use JS to walk the list. You could load the questions by a display number (1, 2, 3, ...) and just keep incrementing it until you get a 'No more questions' response. Since you already have code to load a question by it's ID, one of the first two options might be easiest to implement. The first option would keep you coding mostly in PHP by just returning a link for the JS to follow. The second involves a little more JS work to walk the list of question IDs.

The main issue with your code is how you're trying to find the days element. To explain a bit, lets look at how your HTML gets rendered: <div class='month-container'> <div class='days' id='Vendémiaire'> <div class='day'>1<span class='name'>Raisin</span></div> <div class='day'>2<span class='name'>Safran</span></div> <div class='day'>3<span class='name'>Châtaigne</span></div> <div class='day'>4<span class='name'>Colchique</span></div> <div class='day'>5<span class='name'>Cheval</span></div> </div> <div class='month'>Vendémiaire</div> </div> You are attaching your click handler to the div.month element. That means in your click handler, el is going to reference that element. To try and find the days element, you are looping over the nextElementSibling property until there are no more siblings. Think about that for a moment. nextElementSibling is going to find the elements that come after the current element. What comes after div.next? Nothing. You need to be looking at the previous siblings, using prevElementSibling. Now, once you find your days element, you have another problem. You are testing if it's style.display value is equal to "none". One might think this should be true since you have applied display: none; in your css, but it's not. The reason is that the style properties on the element only refer to styles applied directly to that element via a style="" attribute, not anything inherited via css selectors. Since no direct style was applied to your element, the style.display will be the empty string, fail your condition, and you'll set it to display. On a second click, it would pass and you'd set block and your toggle would start working. Reversing the conditional would fix this double-click issue. --- Now that the issues have been pointed out, there are other things of note and also general ideas that should be applied to make this better. You have both an onclick="" attribute and an addEventListener call on your month elements. You should only have one, and the preferred method is to use addEventListener in your code and stop using the on* attributes. It should be removed, notice I didn't include it in my example html above. Your loop to find the days element is unnecessary. The way your HTML is structured, the days element will be simply el.prevElementSibling, no looping required. If you want to add other elements between your month div and the days elements, a better approach would be to use querySelector on the parent element: el.parentElement.querySelector('.days'); Dealing with style properties directly should generally be avoided if possible. Changing the applied classes is a better approach. For something like this, create another class that sets display to block which can be applied to your days element. You can then use javascript to toggle this class on and off. .days.visible { display: block; } days.classList.toggle('visible'); You can view the above suggestions implemented in this demo fiddle.

If you're not interested in storing results for the quiz, then probably the easiest approach would be to just dump out all the questions when the initial page loads, then use some JavaScript to display them one at a time. That removes the complexity of dynamically loading the questions. Either way though, step 1 is just getting your JavaScript sorted out for marking your correct/incorrect answers and showing the next button. That's the same whether you load the questions dynamically or all at once. You need a way in your HTML to indicate which answer is correct, then attach some on click handlers to your answer divs that checks if the one they clicked is correct or not and updates the display accordingly. Here's an example of loading all the questions at once, then displaying them one at a time. HTML: <div id="quiz"> <div class="question active"> <p> In the movie "Father of the Bride", George Banks played by Steve Martin goes to jail for opening up what food in the supermarket? </p> <ul class="answers"> <li>Burger buns</li> <li data-correct>Hot dog rolls</li> <li>Sausages</li> <li>Twinkies</li> </ul> </div> <div class="question"> <p> Some second example question </p> <ul class="answers"> <li>Answer 1</li> <li>Answer 2</li> <li>Answer 3</li> <li data-correct>Answer 4</li> </ul> </div> <div class="buttons"> <button type="button" id="next-question"> Next question </button> </div> </div> JS: window.addEventListener('DOMContentLoaded', () => { const quiz = document.getElementById('quiz'); document.getElementById('next-question').addEventListener('click', nextQuestion); for (let question of document.querySelectorAll('.question')){ setupQuestion(question); } function setupQuestion(question){ const answers = question.querySelector('.answers'); answers.addEventListener('click', (e) => { if (e.target.nodeName!=='LI' || quiz.classList.contains('answered')){ return; } e.target.classList.add('selected'); quiz.classList.add('answered'); }); } function nextQuestion(){ const activeQuestion = document.querySelector('.question.active'); const nextQuestion = activeQuestion.nextElementSibling; if (nextQuestion.classList.contains('question')){ activeQuestion.classList.remove('active'); nextQuestion.classList.add('active'); quiz.classList.remove('answered'); } } }); CSS: /** Base styles */ .buttons { visibility: hidden; text-align: center; } .question { display: none; } .question.active { display: block; } .answers { list-style-type: none; display: grid; grid-template-columns: auto auto; grid-gap: 20px; } .answers > li { border: 2px solid black; text-align: center; padding: 10px 0; } .answers > li:hover { background-color: #888; } /** Styles for when the question has been answered */ .answered .buttons { visibility: visible; } .answered .answers .selected { background: #f88; } .answered .answers .selected::before { display: inline-block; content: '\274c'; } .answered .answers [data-correct] { background-color: #8f8; } .answered .answers [data-correct]::before { display: inline-block; content: '\2705'; }

Does the problem happen if you use a desktop browser's responsive design tools, or only on the physical device?

If I am understanding the problem right, then it sounds like there's some element on the page that cannot be scaled down so the entire page gets scaled down so that element will fit. Examples could be form elements or images with set widths. My site for example has a couple pages with textarea elements that cause the page to not display scaled down on mobile. Adding width: 100% to them in the mobile styles would fix it, I just haven't done it.

This is something from the days of Internet Explorer. It will not work on any modern browser. If you want to use a local database, use IndexedDB.

It'd be easier to handle this if you restructure the code to separate gathering the query results, and displaying your output. The problem you have currently is trying to determine whether or not you displayed anything after the loop. That could be done somewhat easily by just adding an extra variable, but it's messy. Much cleaner to check before trying to output stuff, and that also gives you greater control over the output. //Assume no results. $results = []; $questionId = $_GET['question'] ?? ''; if ($questionId){ //Only run the query if we have an id. $sql = "SELECT q.question, o.choice, q.image FROM questions q JOIN quiz_options o ON q.qid = o.qid WHERE q.qid = :id;"; $stmt = $pdo->prepare($sql); $stmt->execute(['id' => $questionId]); //Fetch all the result rows $results = $stmt->fetchAll(PDO::FETCH_NUM); } //If we have any results if ($results){ //Display them $last_q = 'x'; // a non-existent value $choice_num = 0; foreach ($results as [$q, $c, $i]){ if ($q <> $last_q) // starting a new question so close the last div and begin a new one { if ($last_q <> 'x') // is this the first question? If not, close the last question's box { echo "</div>"; } echo "<div class='quizContent'>"; // start the new question box echo "<p>$q</p>"; // show the question - figure out later how to prevent repetition (which I did earlier) $pathx = "images/db_images/"; echo '<img class="picture" src="' . $pathx . $i . '">'; $choice_num = 0; // new question; new choice count } $choice_class = 'choice' . $choice_num; // setup the appropriate choice class $last_q = $q; // remember the current question //echo "<p>$q</p>"; // show the question - figure out later how to prevent repetition (which I did earlier) echo "<div class='$choice_class'>"; // a box for this choice echo "<p>$c</p>"; echo "</div>"; // close this choice's box $choice_num++; // bump the choice cnt } echo "</div>"; // close the last question box } else { //Display an error $errorAnswer = 'Question does not exist'; } This does not distinguish between 'ID not passed' and 'ID not found' errors, and I see little reason to do so. If you wanted to do so though, you could by checking $questionId again in the error code.

You can't just stick your PHP code into a JavaScript function like that. By the time your page is rendered in the browser and JavaScript can start doing it's thing, PHP is done. There's no going back for that request. If you want to do more PHP stuff, you have to make a new request in some way, such as via a redirect, a form post, or a background request with fetch(). That new request needs to include whatever information your script will need to perform the appropriate action. A good way to pass this information along is with data attributes on your HTML elements. Here is a quick example of making a request and taking some action according to the response. fetch('/the/url/to/request', {method: 'post', body: 'the content to send'}).then(function(response){ //Check if the response is successful. if (response.ok){ //Decode JSON body of the response. return response.json(); } else { throw new Error(response.statusText); } }).then(function(data){ //Consume the JSON response data to do something if (data.complete){ e.target.disabled = true; } }, function(err){ //Handle any errors. alert('Failed to make request.'); }); When you have your JS making a request on click, then you just need to develop a PHP page for that request to go to. That page will take the data in and call your Set_Checks function.

Yes. Your falling afoul of the common misunderstanding of the line between JavaScript and PHP. onclick and any other such user-interaction mechanism are in the realm of JavaScript, not PHP. JavaScript cannot directly call a PHP function, they are two completely separate things. What JavaScript can do is make a web request to a PHP file, which then calls your PHP function to do whatever needs done. You need modify your onclick handler to call a JavaScript function which will issue a web request to a PHP script with any information required. That PHP then needs to take that information and call your PHP function.

If you want to use /api/houseinfo/1 as your URL, then you need it have that mapped by the server to /api/houseinfo.php?id=1. This is typically done using a URL rewriting feature of your server software. For apache, that is mod_rewrite. Since you're getting a 404 when using /api/houseinfo/1, that implies such rewriting is not taking place. Either you have not configured it, or have configured it incorrectly.

If you're getting a 404 then something about your server configuration is not correct. Probably your URL rewriting configuration is incorrect. Do you get a proper response if you try the url directly, ie: http://localhost/api/houseinfo.php?id=1 Once you've solved that issue and your script is running successfully, you can move on to fixing the JS issue (if it's still an issue at all).

The braces specify a repetition range, like so: {min[,max]}. If you only set the min value then it is an exact count. So what you have says match exactly 5 digits, no more and no less. Presumably, you'd want to instead match between 0 and 5 digits, assuming something like 8M is valid. To do that, you set both values accordingly. \d{0,5}

You are missing a </div> tag. I suspect for the logo_div, but can't be sure. Your translate div is currently a child of your logo div, which doesn't seem correct. You seem to make quite a bit of these basic HTML structure mistakes. You might want to see if you can get better help from your editor in spotting these, or spend more time proof reading your HTML code. For these types of questions, rather than just posting the code it would be preferable if you re-create the problem using something like JSFiddle and provide a link to that. This will make it easier to show what you're seeing and describe what you want instead. I copied your code into a fiddle and attempted to fix the HTML problem, but can't really be sure if the result is the same as what you're seeing. I'm not 100% sure I understand what you want either. My guess is you want the logo to be on the left, the translation widget 20px in from the right, with whatever extra space there is between the two. You can do that by setting justify-content: space-between; on the logo_bar, and margin-right: 20px; (not left) on your translate_div.

padding-top: 250px; Try that on your .nav_div

Unless $return_link is defined somewhere above in that script, that code is still incorrect, but like before PHP doesn't complain too hard about undefined variables. If you have nothing to pass for that parameter, try either null or the empty string (''). <?php echo php_file_tree($FileLocations["tracy"], '', array("gif", "jpg", "jpeg", "png","pdf", "zip", "xlsx")); ?>