index.html

<!DOCTYPE html>
<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700%7CRoboto:400,700" rel="stylesheet">
    <link href='style.css' rel='stylesheet' type='text/css'>
    <title>LeftValues</title>
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="shortcut icon" type="image/png" href="icon.png">
    <meta charset="utf-8">
</head>

<body>
    <a href="https://github.com/LeftValues/leftvalues.github.io" class="github-corner"
        aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250"
            style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
            <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
            <path
                d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
            <path
                d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                fill="currentColor" class="octo-body"></path>
        </svg></a>
    <style>
        .github-corner:hover .octo-arm {
            animation: octocat-wave 560ms ease-in-out
        }

        @keyframes octocat-wave {

            0%,
            100% {
                transform: rotate(0)
            }

            20%,
            60% {
                transform: rotate(-25deg)
            }

            40%,
            80% {
                transform: rotate(10deg)
            }
        }

        @media (max-width:500px) {
            .github-corner:hover .octo-arm {
                animation: none
            }

            .github-corner .octo-arm {
                animation: octocat-wave 560ms ease-in-out
            }
        }
    </style>
    <h1>LeftValues</h1>
    <select id="langPicker"></select>
    <hr>
    <button data-i18n="index_b_start" class="button" onclick="location.href='instructions.html';"
        style="font-size:36pt;">Click here to start!</button>
    <img src="values.png" class="center" alt="The values being differentiated in this quiz" />

    <h2 data-i18n="index_h2_whatis">What is LeftValues?</h2>
    <p data-i18n="index_p_answer">LeftValues is a leftist quiz inspired by and based upon the <a
            href="https://8values.github.io/">8values</a> quiz that seeks to identify your position on the left-wing
        spectrum. If you are not a leftist, this quiz is obviously not suited for you. You will be presented with a
        statement, and then you will answer with your opinion on the statement, from <b>Strongly Agree</b> to
        <b>Strongly Disagree</b>, with each answer slightly affecting your scores. The questions for each axes are
        presented in order, rather than scattered. At the end of the quiz, your answers will be compared to the maximum
        possible for each value, thus giving you a percentage. Answer honestly!<br /><br />
        There are <b><u><span id="numOfQuestions"></span></u></b> questions in the test.</p>

    <h2 data-i18n="index_h2_whatvalues">What are the values?</h2>
    <p data-i18n="index_sixaxes">There are currently seven axes, each of which has two opposing values. They are:</p>
    <p data-i18n="index_rev_desc" class="value-description"><b style="color:#890000;">Revolution</b> <b>vs.</b> <b
            style="color:#FC5959;">Reform</b><br />
        Those with a higher revolution score tend to support a radical and rapid overthrow of the capitalist system
        through a mass uprising. Those with a higher reform score tend to favor inducing gradual changes within
        capitalist structures, such as liberal democracy, with the eventual goal of reaching socialism.</p>
    <p data-i18n="index_sci_desc" class="value-description"><b style="color:#88232B;">Scientific</b> <b>vs.</b> <b
            style="color:#7F0037;">Utopian</b><br />
        Those with a higher scientific score tend to support or sympathize with the Marxist analysis of society along
        the lines of dialectical materialism. Those with a higher utopian score tend to believe in a more idealistic
        analysis of society and reject materialist approaches.</p>
    <p data-i18n="index_cent_desc" class="value-description"><b style="color:#560000;">Central</b> <b>vs.</b> <b
            style="color:#000000;">Decentral</b><br />
        Those with a higher central score tend to support an economic structure based around centralized national
        planning. Those with a higher decentral score tend to support an economic structure based around decentralized
        planning, usually on a more localized scale.</p>
    <p data-i18n="index_int_desc" class="value-description"><b style="color:#782F52;">International</b> <b>vs.</b> <b
            style="color:#7F3300;">National</b><br />
        Those with a higher international score tend to support forming an international socialist movement, often with
        the eventual goal of abolishing nations. Those with a higher national score tend to prioritize building
        socialism within existing borders and reject the goal of a world socialist republic.</p>
    <p data-i18n="index_party_desc" class="value-description"><b style="color:#963B33;">Party</b> <b>vs.</b> <b
            style="color:#7F333B;">Union</b><br />
        Those with a higher party score tend to favor using political parties as the basis of a socialist movement.
        Those with a higher union score tend to favor using trade unions and other forms of mass organization as a basis
        of a socialist movement. Being pro-party does not necessarily mean you oppose unions and vice versa, it is more
        about preference.</p>
    <p data-i18n="index_prod_desc" class="value-description"><b style="color:#804E00;">Production</b> <b>vs.</b> <b
            style="color:#586808;">Nature</b><br />
        Those with a higher production score tend to prioritize industrial output and self-sustainability over
        ecological goals. Those with a higher nature score tend to support an environmentally oriented economy with
        strict ecological protections.</p>
    <p data-i18n="index_cons_desc" class="value-description"><b style="color:#27577A;">Conservative</b> <b>vs.</b> <b
            style="color:#C4A717;">Progressive</b><br />
        Those with a higher conservative score tend to favor more socially conservative policies and views. Those with a
        higher progressive score tend to support more socially progressive policies and views.</p>
    <h2 data-i18n="index_h2_closest">What does "Closest Match" mean in the results?</h2>
    <p data-i18n="index_p_similar">Similar to 8values, this quiz will attempt to match you with a specific leftist
        ideology. There are currently twelve possible ideologies, with more to come in the future. This is a work in
        progress and may not work as intended. Suggestions are very welcome. The current ideologies are:
        Marxism-Leninism, Orthodox Marxism, Eco-Marxism, Centrist Marxism, Council Communism, Left Communism,
        Anarcho-Communism, Eco-Anarchism, Market Anarchism, Utopian Socialism, Democratic Socialism and Social
        Democracy.</p>
    <h2 data-i18n="index_h2_scores">I don't like my scores!</h2>
    <p data-i18n="index_p_scores">Please remember that you are not intended to get a 100% score in any of the
        categories. The point of the quiz is to challenge your views. If you have any suggestions or constructive
        criticism please fill out this <a href="https://forms.gle/6WZYMb5GXkkDLhxr5">short form</a> or open an issue on
        the <a href="https://github.com/LeftValues/leftvalues.github.io">GitHub Page</a>.</p>
    <h2 data-i18n="index_h2_tracked">Am I being tracked?</h2>
    <p data-i18n="index_p_tracked">LeftValues does utilize very basic tracking to get an idea of the amount of visitors.
        No personal information is collected and answers/results are not saved. If you do not believe me, the code is
        open source and available for all to see. For transparency purposes, the collected data for the first week since
        release can be viewed on this <a
            href="https://docs.google.com/document/d/1pcnZdMkEmGXgLMS8izvqd_JEcgjuFgUnfqCRO32q2go/edit?usp=sharing">Google
            Document</a>.</p>
    <p data-i18n="index_license"><br /><br />
        8values is licensed under the MIT License, which permits "without restriction" the rights to "use, copy, modify,
        merge, publish, distribute, sublicense, and/or sell
        copies of the Software". LeftValues is thus able to legally modify the original 8values without infringing on
        any copyright. LeftValues also utilizes the same license.</p>

    <!-- Privacy respecting Statcounter code for LeftValues http://leftvalues.github.io -->
    <script type="text/javascript">
        var sc_project = 12079783;
        var sc_invisible = 1;
        var sc_security = "f3285a9d";
        var sc_https = 1;

        if (navigator.doNotTrack != 1) {
            var statcounterscript = document.createElement('script');
            statcounterscript.setAttribute("type", "text/javascript");
            statcounterscript.setAttribute("src", "https://www.statcounter.com/counter/counter.js");
            document.getElementsByTagName("body")[0].appendChild(statcounterscript);
        }
    </script>
    <!-- End of Statcounter Code -->

    <!-- This is the script for the page itself -->
    <script type="application/javascript" src="questions.js"></script>
    <script type="application/javascript" src="i18n.js"></script>
    <script type="text/javascript">
        loadTranslation().then(() => {
            document.getElementById("numOfQuestions").innerHTML = Object.size(questions)
        })
    </script>
</body>

</html>