Flashcard

This program takes 10 questions from Stackoverflow, and it displays only the ones with answers. Once you think about a question, you simply click on the, "Show me the Answer!" buttons to see how your answer compares to those of others.

You can click on the blue subjective tags to show only questions in that subject.

This was created using the Stackoverflow api. Feel free to clone and mutate it!

Scroll down to the bottom of the page to take a look at the code used the render the page.


You are looking at the most recent active questions

Click on a to browse that subject.







Loading...
Data is loading







The Code (fresh off the presses, displaying what was used above):

so.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <?php 
        $questionsFile 
"so-qa.php";
        
$answersFile "so-answer.php";
        
?>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
        <title>Stackoverflow Flashcards</title>
        <link rel="stylesheet" href="styles/so.css"> 
        <script type="text/javascript" src="http://peter-ajtai.com/jquery/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">    
            /*global $ */
            $.get( 'http://peter-ajtai.com/examples/php/<?php echo $questionsFile?>' + window.location.search , 
                function(data) {
                    $(document).ready(function() {                   
                        $('#q-list').html(data);                        
                        // Open and close the bodies of individual answers.
                        $("input.answer").click( function () {
                            var theID = $(this).attr('id');
                            //Close all _other_ inputs
                            $('#' + theID).closest("ul").find(".aInputShow").not($(this)).removeClass("aInputShow").addClass("aInput").val("Show me the answer."); 
                            //Show correct answer
                            if ( $('#' + theID).val() !== 'Show me the answer!') {
                                if ( $('#' + theID).val() === 'Show me the answer.') {
                                    // Change the input button                                    
                                    $('#' + theID).removeClass("aInput").addClass("aInputShow");
                                    $('#' + theID).val("Hide the answer.");                                     
                                } else {                                   
                                    $('#' + theID).removeClass("aInputShow").addClass("aInput");
                                    $('#' + theID).val("Show me the answer.");};
                                // Show / hide current answer and close all answer divs
                                $('#' + theID + "-ans").toggle().siblings('.answer-response').hide();
                            } else {                                                        
                                // Change the input button
                                $('#' + theID).removeClass("aInput").addClass("aInputShow");
                                $('#' + theID).val("Hide the answer.");                            
                                $.get('http://peter-ajtai.com/examples/php/<?php echo $answersFile?>', 
                                { answerNum: theID },
                                function(data) {                                
                                    var answerDiv = $(document.createElement('div'));
                                    $(answerDiv).attr('id', theID + "-ans");
                                    $(answerDiv).attr('class', "answer-response");
                                    $(answerDiv).html(data);                                    
                                    $('#' + theID).closest('.question-box').append(answerDiv);
                                    $('#' + theID + "-ans").siblings('.answer-response').hide();
                                });
                            
                            }; 
                        });
                        
                        // Open and close the body of questions.
                        $("input.question").toggle(
                            function() {
                                var theID = $(this).attr('id');                        
                                $('#' + theID + "-que").css('display','inline');
                                $('#' + theID).val("Hide the body of the question.");       
                                $('#' + theID).removeClass("aInput").addClass("aInputShow");                                                                
                            },
                            function() {
                                var theID = $(this).attr('id');                        
                                $('#' + theID + "-que").css('display','none');
                                $('#' + theID).val("Show me the body of the question.");                                
                                $('#' + theID).removeClass("aInputShow").addClass("aInput");                                
                            }
                        );
                    });                                          
                }
            );               
        </script>   
    </head>
    <body>
        <div id="page">
            <div id="intro">
                <h1><a href="http://peter-ajtai.com/examples/php/so.php">Flashcard</a></h1>
                <noscript>
                    <p style="color:red; font-size:200%; border:solid 5px red; width:66%; margin:1em auto; padding:1em;">Sorry, you need Javascript
                    to use this page, since it relies on data loaded with Javascript.</p>
                </noscript>
                <p>This program takes 10 questions from <a href="http://stackoverflow.com/">Stackoverflow</a>, and it 
                displays only the ones with answers. Once you think about a question, you simply click on 
                the, "Show me the Answer!" buttons to see how your answer compares to those of others.</p>
                <p>You can click on the blue subjective tags to show only questions in that subject.</p>
                <p>This was created using the <a href="http://api.stackoverflow.com/1.0/help">Stackoverflow api</a>. Feel free to clone and mutate it!</p>
                <p>Scroll down to the bottom of the page to take a look at the code used the render the page.</p>        
            </div>
            <br/>  
            <div class="tags-info">
                <?php
                
if (isset($_GET["tag"]))
                {                    
                    
?>
                    <h2>You are currently browsing:</h2>
                    <div class="tags">
                    <?php
                        
echo '<a  class="post-tag" href="http://peter-ajtai.com/examples/php/so.php?tag=' $_GET["tag"] . '">' $_GET["tag"] . '</a>';                        
                    
?>
                    </div><br/>
                    <?php
                
} else
                {
                    echo 
'<h2>You are looking at the most recent active questions</h2>';
                    echo 
'<p>Click on a <span class="post-tag">blue subject tag</span> to browse that subject.</p>';
                }
                
?>
            </div>
            <div id="q-list">   
                <!-- Content will be loaded here -->
                <br/><br/><br/><br/><br/><br/>
                <h2>Loading...<br/>
                <img src="images/ajax-loader.gif" alt="Data is loading" /></h2>
                <br/><br/><br/><br/><br/><br/>
            </div>            
            <h2>The Code (fresh off the presses, displaying what was used above):</h2>
            <h3>so.php</h3>
            <p>
                <?php
                    
// Show code ##################################################################
                    
highlight_file(__FILE__);
                
?>
            </p>
            <h3><?php echo $answersFile ?></h3>
            <p>
                <?php
                    
// Show code ##################################################################
                    
highlight_file($answersFile);
                
?>
            </p>        
            <h3><?php echo $questionsFile?></h3>
            <p>
                <?php
                    
// Show code ##################################################################
                    
highlight_file($questionsFile);
                
?>
            </p>             
        </div><!--#page-->  
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-4145174-13']);
            _gaq.push(['_trackPageview']);
            (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>        
    </body>
</html>

so-answer.php

<?php
include_once "css.php";
// create a new cURL resource
$answerID $_GET["answerNum"];
$ch curl_init("http://api.stackoverflow.com/1.0/answers/$answerID?body=true&key=$key");
// set URL and other appropriate options        
curl_setopt($chCURLOPT_HEADER0);
curl_setopt($chCURLOPT_RETURNTRANSFER1);
curl_setopt($ch,CURLOPT_ENCODING,1);
// grab URL
$json curl_exec($ch);
// close cURL resource, and free up system resources
curl_close($ch);    
// Decode JSON into associative array
$obj json_decode($jsontrue); 

echo
"<br/>";
                    
if (
$obj["answers"][0]["down_vote_count"])
    echo 
'<span class="down-vote">-' $obj["answers"][0]["down_vote_count"] . '</span> &nbsp;&nbsp;';
if (
$obj["answers"][0]["up_vote_count"])    
    echo 
'<span class="up-vote">+' $obj["answers"][0]["up_vote_count"] . '</span>';
if (!
$obj["answers"][0]["down_vote_count"] && !$obj["answers"][0]["up_vote_count"])
    echo 
'<span class="vote">0</span>';
                    

echo 
$obj["answers"][0]["body"];

?>

so-qa.php

<?php
$thisTag
="";
    if (isset(
$_GET["tag"]))
    {
        
$thisTag $_GET["tag"];
        
$thisTag urlencode($thisTag);
    }
    if (
$thisTag)
        
$thisTag "&tagged=" $thisTag ';';
include_once 
"css.php";
// create a new cURL resource            
$numQuestions 10;                   
$ch curl_init("http://api.stackoverflow.com/1.0/questions?pagesize=$numQuestions&answers=true&body=true{$thisTag}&key=$key");                                   
// set URL and other appropriate options        
curl_setopt($chCURLOPT_HEADER0);
curl_setopt($chCURLOPT_RETURNTRANSFER1);
curl_setopt($ch,CURLOPT_ENCODING,'gzip');
// grab URL
$json curl_exec($ch);
// close cURL resource, and free up system resources
curl_close($ch);    
// Decode JSON into associative array
    
$obj json_decode($jsontrue);      
    echo 
'<ol>';
    foreach (
$obj["questions"] as $key)
    {                 
        if (
$key["answer_count"])
        {
            
?>
            <li class="answer-li question-box" id="<?php echo $key["question_id"]; ?>-box">                                        
                <h3>
                    <?php
                    
if ($key["down_vote_count"])
                        echo 
'<span class="down-vote">-' $key["down_vote_count"] . '</span> &nbsp;&nbsp;';
                    if (
$key["up_vote_count"])    
                        echo 
'<span class="up-vote">+' $key["up_vote_count"] . '</span>';
                    if (!
$key["down_vote_count"] && !$key["up_vote_count"])
                        echo 
'<span class="vote">0</span>';
                    
?>
                    <a href="http://stackoverflow.com/questions/<?php echo $key["question_id"]; ?>/"><?php echo $key["title"]; ?></a>
                </h3> 
                <div class="tags">
                    <?php
                    
foreach ($key["tags"] as $theTag)
                    {
                        echo 
'<a  class="post-tag" href="http://peter-ajtai.com/examples/php/so.php?tag=' urlencode($theTag) . '">' $theTag '</a>';
                    }
                    
?>
                </div>
                <br/>
                <input type="button" value="Show me the body of the question." id="<?php echo $key["question_id"]; ?>" class="question" />
                <div id="<?php echo $key["question_id"]; ?>-que" class="question">
                    <?php echo $key["body"]; ?>
                </div>
                <h5><?php echo $key["answer_count"]; ?> Answers:</h5>                
                <ul>
                    <?php
                    
foreach ($key["answers"] as $response)
                    {
                        echo 
'<li class="answer-li">';
                            echo 
'<input type="button" value="Show me the answer!" id="' $response["answer_id"] . '" class="answer aInput" />';                        
                            echo 
' <a href="http://stackoverflow.com/questions/' "{$response["question_id"]}/{$response["answer_id"]}#{$response["answer_id"]}";
                                echo 
'" class="answer-link">Answer link</a>';                                                    
                        echo 
'</li>';                                    
                    }
                    
?>                    
                </ul>
                <br/>
            </li>
            <?php
        
}
    } 
    echo 
'</ol>';
?>